Настройка содержимого именованного роутера в дочернем маршруте

Markus спросил: 14 ноября 2017 в 06:26 в: angular

В моем приложении я хочу отображать контент в двух выходах маршрутизатора, основной и именной. Если я размещу оба выхода на корневом уровне, я могу установить содержимое названного выхода следующим образом:

this.router.navigate([{ outlets: { rootSecondary: ['rootSecondaryPath'] } }]);

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

Если я создаю дочерний маршрут, который также имеет основной и именованный выход, я не могу установить содержание вторичного выхода. Сообщается об ошибке:

Невозможно сопоставить любые маршруты.

маршруты определены следующим образом:

const appRoutes: Routes = [
  { path: '', component: RootPrimaryComponent },
  { path: 'rootSecondaryPath', component: RootSecondaryComponent, outlet: 'rootSecondary' },
  {
    path: 'child', component: ChildComponent, children:
      [
        { path: '', component: ChildPrimaryComponent },
        { path: 'childSecondaryPath', component: ChildSecondaryComponent, outlet: 'childSecondary' },
      ]
  },
];
const appRouting = RouterModule.forRoot(appRoutes);

Шаблон app.component.html содержит основной выход и - в целях тестирования - именованный дополнительный:

<router-outlet></router-outlet>
<div style="border: solid 1px green">
  <router-outlet name="rootSecondary"></router-outlet>
</div>

Приведенный выше код вызывается из кнопки и без проблем устанавливает выход rootSecondary.

Шаблон child.component.html определяет два выхода, которые находятся внутри корневого основного выхода:

<router-outlet></router-outlet>
<div style="border:solid 1px red">
  <router-outlet name="childSecondary"></router-outlet>
</div>

child.primary.component.html содержит кнопку, которая вызывает код для установки дополнительного выхода:

<div>
  child-primary works!
  <button (click)="setChildSecondary()">Set child secondary</button>
</div>

При щелчке запускается следующий код:

setChildSecondary() {
  this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }]);
}

Как мне изменить код так, чтобы выход-маршрутизатор childSecondary был заполнена?


0 ответов