Angular5 Множественные именованные маршруты не обновляются с routerLink
Использование Angular 5 и именованных маршрутов.. Я пытаюсь обновить...
- содержание страницы
- заголовок
- нижний колонтитул
И код компонента контейнера...
<router-outlet name="topview"></router-outlet>
<router-outlet ></router-outlet>
<router-outlet name="bottomview"></router-outlet>
Дает мне ошибку
core.js:1427 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'content'
Основной код выглядит следующим образом... app-routing.ts
// Defined routes to content
export const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'content', component: Content1Component, children: [
{ path: 'child-content', component: Header1Component, outlet: 'topview'},
{ path: 'child2-content', component: Footer1Component, outlet: 'bottomview' }
] },
{ path: 'header1', component: Header1Component, outlet: 'topview'},
{ path: 'footer1', component: Footer1Component, outlet: 'bottomview' },
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, { enableTracing: true,
initialNavigation: 'enabled' })],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
код компонента routerLink...
<!-- Normal links to content pages works... -->
<p>
<a class="nav-item" routerLink="/">Home</a> |
<a class="nav-item" [routerLink]="['/content1']">Content 1</a> |
</p>
<!-- Named routed not working for normal route or child routes... -->
<p>
<a class="nav-item"
[routerLink]="['/content',
{outlets: {
'topview': ['child-content'],
'bottomview': ['child2-content']
}}]"> Content with children defined</a>
<a class="nav-item"
[routerLink]="['/content',
{outlets: {'topview': ['header'],
'bottomview': ['footer']
}}]">Content with normal routes</a> |
Вся документация указывает на то, что это правильно.
Некоторое тестирование... если я удаляю основной маршрут из routerLink и содержал только выходы - это работает контент для обновления верхнего / нижнего колонтитула. Но не могу заставить его работать.