각도 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} 
    ) 
    } 
    ... 

나는 그것이 내가 그것을 어떻게 해야하는 생각 무엇 /admin/accounts(modal:1/edit)로 이동하려고 ModalService.open([account.id, 'edit']) 전화. 하지만 난 그냥 1/edit URL 세그먼트와 일치하지 않는 오류가 발생합니다.

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 
     } 
    ] 
    } 
] 

이 문제를 해결하려면, 우리는 경로에 대해 무언가를 제공해야합니다. 여기

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

가 있습니다 :

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

또는 프로그래밍 방식 :

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

은 당신이 routerLink에서 하나 귀하의 보조 경로를 탐색 할 수 있습니다 : 예를 들어, 당신은 당신의 경로 'accounts' 이름을 경우 working Plunkr 이것을 알아 내고 자식 보조 경로를 성공적으로로드하는 방법을 보여줍니다.