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被diplaying細
• /contacts被diplaying細
• /emails(aux:auxiliary)在裝載diplaying細
• /contacts(aux:auxiliary)在裝載

當輔助處於diplaying細網址，這是我們第一次達到。
但是，如果我點擊<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 

而只是看到以下網址： http://localhost:4200/emails

編輯：

下面是一個GIF來演示問題：

Answer 1

您可以通過使用虛擬路由來照顧這種情況，

使用虛擬路由的原因是從/ emails（aux：auxiliary）切換到/ emails Angular不會重新加載組件，因爲主路徑是相同。所以你需要強制重新加載組件。

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

添加一個虛擬路由路由器：

{ path: 'dummy', component: dummyComponent } 

dummyComponent.ts

//Dummy component for route changes 

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

現在您的組件中添加changeRoute功能：

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 

這將重新渲染你的組件和休息都將由Angular照顧。