角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からいずれかのあなたのAUXルートにナビゲートすることができます：たとえば、あなたはあなたのパス'accounts'に名前を付ける場合working Plunkrこれを理解し、子補助経路のロードに成功したことを証明しました。