Вложенная маршрутизация Angular 6.1.9 к именованным розеткам - ошибка `` Не удается сопоставить ни один маршрут ''
Я использую Угловой 6.1.9 с его модулем маршрутизатора. Мне кажется невозможным маршрутизировать / отображать содержимое названной розетки.
При вызове <a [routerLink] = "['', { outlets: { editArea: ['addRootPartner'] } }]">foo</a> происходит сбой:
NavigationError(id: 2, url: '/overview/work/allPartners(editArea:addRootPartner)', error: Error: Cannot match any routes. URL Segment: 'addRootPartner')
Моя структура приложения:
app.module
app-routing.module
workspace.module
workspace-routing.module
маршрутизация приложений:
const rootAppRoutes: Routes = [
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
{ path: 'overview', loadChildren: './overview/workplace/workplace.module#WorkplaceModule' },
{ path: '**', component: PageNotFoundComponent }
];
Перенаправляет на overview, который загружает модуль workplace.
рабочее место-маршрутизация:
const workplaceRoutes: Routes = [
{ path: '', redirectTo: 'work', pathMatch: 'full'},
{ path: 'work', component: WorkplaceComponent, children: [
{ path: 'allPartners', component: RootPartnersComponent },
{ path: 'childPartners', component: ChildPartnersComponent },
{ path: '', redirectTo: 'allPartners', pathMatch: 'full'}
]},
{ path: 'addRootPartner', component: AddRootPartnerComponent, outlet: 'editArea' }
];
Перенаправляет на work, который отображает WorkplaceComponent. Затем он переходит к дочернему allPartners, который отображает RootPartnersComponent.
В коде я использую два <router-outlet>. Один находится внутри компонентного модуля app:
<router-outlet></router-outlet>
Второй - в модуле workplace, WorkplaceComponent:
<router-outlet></router-outlet>
<router-outlet name = "editArea"></router-outlet>
Что не так с этой настройкой? Есть ли технические ограничения на использование вложенных именованных розеток?
Ответы 1
Хорошо, после ночи, проведенной с этим беспорядком, я нашел решение.
Во-первых, именованные дочерние маршруты розеток не работают, если они определены в родительском с path: '' ...
// the root redirect due to named outlets not being able to work as children of "path: ''"
{ path: '', redirectTo: 'work', pathMatch: 'full' },
{ path: 'work', component: WorkplaceComponent, children: [
{ path: '', component: RootPartnersComponent, outlet: 'displayArea' },
{ path: 'childPartners', component: ChildPartnersComponent, outlet: 'displayArea' },
// child for edit area outlet
{ path: 'addRootPartner/:id', component: AddRootPartnerComponent, outlet: 'editArea' }
]}
Вторая проблема была связана со ссылкой на маршрутизатор. Судя по всему, вы должны указать свой родительский маршрут в качестве основы для навигации. Таким образом, навигация должна выполняться программно.
this.router.navigate([
// NOTE: No relative-path navigation is required because we are accessing
// the parent's "activatedRoute" instance. As such, this will be executed
// as if we were doing this in the parent view component.
{
outlets: {
editArea: ['addRootPartner']
}
}
],
{
relativeTo: this.activatedRoute.parent // <--- PARENT activated route.
}
);
Супер позднее редактирование:
Проблема с path: '' может быть вызвана настройкой этого маршрута как первого.
The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first.
@Chax: Похоже, что в Angular 7.0.1 stackblitz он работает немного по-другому. В любом случае, пожалуйста: stackblitz.com/edit/angular-ffg92e
Привет, мне было бы любопытно увидеть рабочий пример вашего решения в stackblitz