Угловой 2 маршрутизатор не разрешает дочерний вспомогательный маршрут

Question

Я пытаюсь использовать вспомогательный маршрут для модального окна. Независимо от того, что я пытаюсь, я не могу заставить его решить. Я просто получаю ошибки маршрутизации. Вот мой подход ...

app.component.html

<router-outlet></router-outlet> 
<router-outlet name="modal"></router-outlet> 

админа routing.module.ts

... 
const ROUTES: Routes = [ 
    { 
    path: 'admin', 
    component: AdminComponent, 
    children: [ 
     { 
     path: 'accounts', 
     loadChildren: './accounts/accounts.module#AccountsModule' 
     },{...} 
    ] 
    } 
]; 
... 

счетов-routing.module.ts

... 
const ROUTES: Routes = [ 
    { 
    path: '', 
    children: [ 
     { 
     path: '', 
     component: AccountsIndexComponent 
     },{ 
     path: 'new', 
     component: AccountsNewComponent 
     },{ 
     path: ':id', 
     component: AccountsShowComponent 
     },{ 
     path: ':id/edit', 
     component: AccountsEditComponent, 
     outlet: 'modal' 
     } 
    ] 
    } 
]; 
... 

modal.service.ts

... 
    constructor(
    private router:Router, 
    private route:ActivatedRoute 
) { } 
    open(route:Array<any>) { 
    this.router.navigate(
     [{outlets: {drawer: route}}], {relativeTo: this.route} 
    ) 
    } 
    ... 

Когда я называю ModalService.open([account.id, 'edit']) он пытается перейти к /admin/accounts(modal:1/edit) который является то, что я думаю это должен делать. Но я просто получаю сообщение об ошибке, что он не может соответствовать сегменту URL-адреса 1/edit.

NavigationError(id: 2, url: '/admin/accounts(modal:1/edit)', error: Error: Cannot match any routes. URL Segment: '1/edit') 

Я попытался следующие, и они не работают либо ...

ModalService.open(['accounts', account.id, 'edit']) 
ModalService.open(['admin','accounts', account.id, 'edit']) 

Answer 1

Кажется, что есть в маршрутизаторе, который предотвращает дочерние вспомогательные маршруты из того загружен known bug когда родительский путь пуст, что то, что вы делаете в accounts-routing.module.ts:

const ROUTES: Routes = [ 
    { 
    path: '',     // <--- cannot have an empty parent path... 
    children: [ 
     { 
     path: ':id/edit', 
     component: AccountsEditComponent, 
     outlet: 'modal'  // <--- ...with child aux outlet 
     } 
    ] 
    } 
] 

Чтобы обойти эту проблему, мы должны поставить что-то на пути. Например, если вы называете ваш путь 'accounts':

const ROUTES: Routes = [ 
    { 
    path: 'accounts', 
    ... 

, то вы можете перемещаться по вашему Окс маршруту либо из routerLink:

<a [routerLink]="['accounts', {outlets: {'modal': ['1/edit']}}]"> 

или Programatically:

this.router.navigateByUrl('accounts/(modal:1/edit)') 

Вот working Plunkr Я сделал это, чтобы продемонстрировать это и продемонстрировать успешную загрузку детского вспомогательного маршрута.