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

Пример шаблона:

<nav class="nav menu">
    <a *ngFor="let navRoute of navigationRoutes" class="nav-link" [class.selected]="navRoute.isActive" (click)="onActivated(navRoute.route)">{{navRoute.header}}</a>
</nav>
<router-outlet name=[[DO SOME BINDING HERE]]></router-outlet>

NavigationRoutes и имя - это компонент @inputs

8
Steven Muhr 25 Ноя 2016 в 17:26

2 ответа

Лучший ответ

Насколько я знаю, это работает некоторое время

<router-outlet [name]="propertyWithOutletName"></router-outlet>

Была попытка его реализовать, но не завершилась.

https://github.com/angular/angular/pull/12550

2
Günter Zöchbauer 25 Ноя 2016 в 14:44

Это так расстраивает. Я действительно хотел бы получить реальное решение. Вот мой ужасный хак, который работает в данном случае, потому что у меня всего три выхода: a, b и c. Мой вариант использования состоит в том, что у меня есть трехпанельная система с дополнительными URL-адресами и дочерними маршрутами. Мое «решение» потерпело бы неудачу, если бы у меня когда-либо была система с произвольным количеством именованных выходов или если бы имена выходов маршрутизатора могли динамически изменяться.

Что мы можем сделать, чтобы исправить это в случае angular?

@Component({
  selector: 'my-router-outlet',
  template: `
    <router-outlet 
      *ngIf="route.outlet === 'a'"
      name="a"
    ></router-outlet>
    <router-outlet 
      *ngIf="route.outlet === 'b'"
      name="b"
    ></router-outlet>
    <router-outlet 
      *ngIf="route.outlet === 'c'"
      name="c"
    ></router-outlet>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RouterOutletComponent {
  constructor(public route: ActivatedRoute) {}
}
2
bkinsey808 1 Ноя 2017 в 20:54