プライマリルートを維持しながら二次ルートに角度を移動

Question

明示的にプライマリルートを指定せずに、モーダルと呼ばれるセカンダリルートに移動したいと考えています。

私は、コンポーネントクラスでこれを試してみた：

onclick(){ 
    this.router.navigate([{ outlets: { foo: 'modal' } }], { relativeTo: this.route }); 
} 

上記のコードは動作するようです。しかし、それは/first(foo:modal)に分割された後、ルート/にナビゲートします。

私は間違っていますか？

<a href="#" routerLink="/*(foo:modal)">Open Modal</a> 

....それは任意の主要ルートと一致するように、これが可能である：

のような何かをするとよいでしょうか？

Answer 1

あなたは{ oultletName: url}

<a [routerLink]="[{outlets: { modal: 'edit/20']}}]">Edit</a> 
router.navigate([{outlets: { modal: 'edit/20'}}]); 

または複数のセグメントの出口を指定することによってのみ、二次セグメントを設定することができる：

<a [routerLink]="[{outlets: {primary: 'products', modal: 'edit/20']}}]">Edit</a> 
router.navigate([{outlets: {primary: 'products', modal: 'edit/20'}}]); 

Answer 2

問題が即時リダイレクトを引き起こしたachorタグにhref="#"ました。削除すると問題が解決しました。

かかわらず、プライマリルートのセカンダリルートに移動するには：

<a routerLink="one" >Home</a> 
<a routerLink="two" >Admin</a> 
<a [routerLink]="[{ outlets: { foo: 'modal' } }]">open</a> 
<a [routerLink]="[{ outlets: { foo: null } }]">close</a> 

そして、あなたは命令的にナビゲートする場合：

<a (click)="open()">Open</a> 
<a (click)="close()">Close</a> 

open() { 
    this.router.navigate([{ outlets: { foo: 'modal' } }]); 
} 
close() { 
    this.router.navigate([{ outlets: { foo: null } }]); 
}