С помощью маршрутизатора Angular как я могу поделиться маршрутами через несколько именованных точек

Question

У меня есть приложение, в котором я хочу показать один и тот же набор компонентов / маршрутов в нескольких местах приложения.Представьте что-то вроде нескольких панелей или боковых панелей, где пользователь может показывать одни и те же компоненты в нескольких местах в зависимости от того, что они выбрали.

Например, пользователь может захотеть «показать компонент состояния на боковой панели» или «показать компонент состояния в правой нижней панели на странице».

(В моем случае количество торговых точекисправлена, но та же концепция могла бы использоваться для пользовательского интерфейса в стиле панели мониторинга с динамическим числом карт, каждая из которых имеет маршрут для загрузки компонента)

Моя идея заключалась в использовании углового маршрутизатора с именованными выходами дляэтот.Это позволит легко повторно использовать компоненты, поддерживающие динамическое создание, а также сохранить текущее состояние маршрутизации в URL для легкой перезагрузки.

Так, например, URL может выглядеть следующим образом:

https://.../app(side:status_comp//popup:other_comp)

Я назвал розетки работающими, но я не могу понять, как это сделать, это повторно использовать маршрут через несколько именованных розеток без дублирования маршрута в конфигурации маршрутизатора.

Например:

const appRoutes: Routes = [
  { path: 'main', component: AppComponent },  

  // ==> Have to repeat each route for each outlet name
  { path: 'comp_a', component: CompA, outlet: 'first' },  
  { path: 'comp_b', component: CompB, outlet: 'first' },  
  { path: 'comp_a', component: CompA, outlet: 'second' },  
  { path: 'comp_b', component: CompB, outlet: 'second' },   

  // ==> Would like to just do this
  /*
  { path: 'comp_a', component: CompA},  
  { path: 'comp_b', component: CompB},  
  */

  { path: '', redirectTo: '/main', pathMatch: 'full' },
  { path: '**', redirectTo: '/main' }
];

Упрощенный шаблон:

<p>Outlet 1</p>
<a [routerLink]="[{ outlets: { first: ['comp_a'] } }]">Comp A</a>
<a [routerLink]="[{ outlets: { first: ['comp_b'] } }]">Comp B</a>

<div class="outlet-wrapper">    
  <router-outlet name="first"></router-outlet> 
</div>

<p>Outlet 2</p>
<a [routerLink]="[{ outlets: { second: ['comp_a'] } }]">Comp A</a>
<a [routerLink]="[{ outlets: { second: ['comp_b'] } }]">Comp B</a>

<div class="outlet-wrapper">  
   <router-outlet name="second"></router-outlet>
</div>

Затем направьте компонент в розетку, используя:

this.router.navigate([{outlets: {first: ['comp_a']}}]);

Я хотел бы просто установить маршрутизатор содин маршрут к данному компоненту, а затем можно будет вызывать router.navigate с любым определенным маршрутом, но сказать ему, чтобы загрузить этот маршрут в названную точку.

Есть ли способ сделать это.

Вот пример на stackblitz, где у меня есть все настройки. ng-router-reuse app

Изменение, которое я хочу сделать, показано выше и в том же самом в определениях маршрутов.

Есть идеи?

Примечание: я знаю, что мог бы использовать что-то вроде Portals из Angular CDK и динамически загружать компоненты.Однако проблема в том, что состояние того, что видит пользователь, не сохраняется в URL-адресе для управления маршрутизатором, а также предотвращает использование отложенной загрузки маршрутизатора.

Answer 1

Похоже, что вы можете динамически обновлять настройки маршрутизатора во время выполнения, во время навигации. Вот пример. https://stackblitz.com/edit/ng-router-reuse-c7j96a

А вот краткое объяснение.

1) По ссылке или нажатию кнопки найдите маршрут в конфигурации роутера.

 let route = this.router.config.filter(r => r.path === 'comp_a' && r.outlet === 'second')[0];

2) если маршрут не существует, добавьте его в конфигурацию.

if(!route){
  this.router.config.unshift({path:'comp_a',outlet:'second',component:CompA})
}

мы используем метод unshift, а не push, потому что мы не хотим добавлять новый маршрут в конце. Мы всегда хотим сохранить ** как последний маршрут.

3) Затем просто перейдите к маршруту.

this.router.navigate([{outlets: {second: ['comp_a']}}]);

Это решение может быть полезно, когда приложение уже загружено. Но если вы попытаетесь загрузить URL, который имеет путь с именованным выходом, и если этот маршрут не определен в конфигурации маршрутизатора, он выдаст ошибку.

Чтобы преодолеть эту ситуацию, вы можете прослушать событие NavigationStart на уровне модуля и там вы можете изучить URL и добавить маршруты соответственно. Хотя это можно сделать, мне не кажется чистым. Я надеюсь, что это поможет.