Главный вопрос: есть ли способ вывести дочерний маршрут на родительский роутер-розетку?
Рассмотрим этот пример в руководстве для маршрутизатора Angular.io.
Фрагмент основного маршрута:
const appRoutes: Routes = [
...
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [AuthGuard]
},
{
path: 'crisis-center',
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
data: { preload: true }
},
....
];
Фрагмент основного компонента:
@Component({
selector: 'app-root',
template: `
<h1 class="title">Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
<a routerLink="/admin" routerLinkActive="active">Admin</a>
...
</nav>
<router-outlet></router-outlet>
`
})
CrisisCenter Route Snippet:
const crisisCenterRoutes: Routes = [
{
path: '',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
...
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
CrisesListComponent Snippet:
@Component({
template: `
<ul class="items">
<li *ngFor="let crisis of crises$ | async"
[class.selected]="crisis.id === selectedId">
<a [routerLink]="[crisis.id]">
<span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
</a>
</li>
</ul>
<router-outlet></router-outlet>
`
})
CrisisDetailComponent Snippet:
@Component({
template: `
<div *ngIf="crisis">
<h3>"{{ editName }}"</h3>
...
</div>
`
})
Выход этого маршрутизатора следующий:
Так. Я пытаюсь сказать, что когда вы нажимаете, скажем, Dragon Burning Cities, вместо того, чтобы отображать его внизу, почему бы просто не отобразить его на уровне CrisesListComponent?
Все, что я могу придумать, - это использовать * ngIf как это в CrisesListComponent:
@Component({
template: `
<ul class="items" *ngIf="a list is selected hide this!!!">
<li *ngFor="let crisis of crises$ | async"
[class.selected]="crisis.id === selectedId">
<a [routerLink]="[crisis.id]">
<span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
</a>
</li>
</ul>
<router-outlet></router-outlet>
`
})
Можно ли настроить дочерний маршрутизатор на этот дисплей на этом родительском маршрутизаторе?
Спасибо. Надеюсь, я прояснил свой вопрос.