Установка содержимого именованного маршрутизатора-розетки в дочернем маршруте

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

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>

Приведенный выше код вызывается с помощью кнопки и без проблем устанавливает корневую вторичную розетку.

Шаблон 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'] } }]);
}

Как мне изменить код, чтобы дочерний элемент роутера был заполнен?


typescript angular router-outlet angular-router
person Markus    schedule 08.12.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Чтобы решить эту проблему, мне нужно было установить параметр relativeTo для родительского элемента текущего активного маршрута:

export class ChildPrimaryComponent {

  constructor(private readonly router: Router,
    private readonly route: ActivatedRoute) { }

  setChildSecondary() {
    this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }],
      { relativeTo: this.route.parent });
  }
}
person Markus    schedule 09.12.2017
comment
Молодец! эта проблема просто убила мой 1 час, прежде чем прийти к вашему решению. Спасибо. - person Edward Liang; 08.03.2018