2016-09-21 173 views
1

我正在玩Angular2輔助路由,我無法弄清楚什麼。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來演示問題: enter image description here

回答

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照顧。

+0

它似乎沒有使用'url',並且這是硬編碼到'emails'。 此外,原來的問題是,「我們如何更改主URL,而不更改輔助路徑?(如果沒有輔助,只需轉到新的URL,如果是輔助的,轉到URL +輔助)。」它看起來像你正在改變輔助路線。 – N13