Angular2：ルーターと補助ルート

Question

私はAngular2補助ルートで遊んでいて、何かを理解することはできません。

私たちには、連絡先のある基本的なメールアプリケーションがあるとしましょう。

基本的に、私のHTMLは次のようになります。

<div> 
    <a [routerLink]="['emails']">Emails</a> 
    <a [routerLink]="['contacts']">Contacts</a> 
    <a [routerLink]="[{outlets: {aux: ['auxiliary']}}]">Open an auxiliary route</a> 
</div> 

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

はこれまでのところ、それはほぼ大丈夫です。

• /emailsは
• /emails(aux:auxiliary)を補助している場合ローディング

で微細diplayingれるローディング

/contacts(aux:auxiliary)で罰金をdiplayingれる微細diplayingれる微細

/contactsをdiplayingれますURLは初めてですそれに達する。
しかし、<a [routerLink]="['emails']">Emails</a>をクリックすると、URLがまだhttp://localhost:4200/emails(aux:auxiliary)であっても、私のAUXコンセントは表示されなくなります。

補助ルートを変更せずにプライマリURLを変更するにはどうすればよいですか。 （補助がない場合は、新しいURLに行き、補助の場合はURL +補助に行きます）。

私が試した：

<a [routerLink]="['emails', {outlets: {aux: ['/']}}]">Emails</a> 
<a [routerLink]="['contacts', {outlets: {aux: ['/']}}]">Contacts</a> 

とも

<a [routerLink]="['emails', {outlets: {aux: ['./']}}]">Emails</a> 
<a [routerLink]="['contacts', {outlets: {aux: ['./']}}]">Contacts</a> 

をしかし、それはどちらか動作していないです。

ありがとうございました！

PS：あなたが自分でそれを試してみたいならば、私のテストはGithubの上にある：

git clone https://github.com/maxime1992/angular2-nrgx-demo.git 
git checkout auxiliary-route 
npm i 
ng serve 

そして、ちょうど次のURLを見て： http://localhost:4200/emails

EDIT：

問題を説明するGIFは次のとおりです。

Answer 1

ダミールートを使用してこのシナリオを処理することができます

ダミールートを使用する理由は、/ emails（aux：auxiliary）から/ emailsに切り替えると、プライマリパスが同じ。コンポーネントを強制的にリロードする必要があります。

<a (click)="changeRoute(url)"> 

ルータに1つのダミールートを追加します。

changeRoute => (url){ 
    self.router.navigateByUrl('/dummy', { skipLocationChange: true }); 
    setTimeout(()=>self.router.navigate(['emails',{outlets: {aux: null}}])); 
} 

// {outlets: {aux: null}} this will set your outlet to null and clean your url to /emails 
// 'skipLocationChange' will avoid /dummy to go into history API 

01：

{ path: 'dummy', component: dummyComponent } 

dummyComponent.tsコンポーネント内部の今

//Dummy component for route changes 

@Component({ 
    selector: 'dummy', 
    template: '' 
}) 
export class dummyComponent{} 

changeRoute機能追加

これはコンポーネントを再レンダリングし、残りはすべてAngularによって処理されます。