1. 程式人生 > >Angular路由(6)--輔助路由

Angular路由(6)--輔助路由

輔助路由為了解決一個頁面放置多個插座的問題,這很重要。

// 主路由插座寫法

<router-outlet></router-outlet>

// 輔助路喲插座寫法, 多了個name屬性

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

實現輔助路由分三個步驟

1. 宣告一個輔助路由

<router-outlet></router-outlet>
<router-outlet name=`otherOutlet`></router-outlet>

 

2. 在Routes中配置路由組建. 在配置中多了一個 outlet屬性

{path: `other`, component: OtherComponent, outlet: `otherOutlet`}

3. 修改連結

<a [routerLink]= "[`/home`, {outlets:{other:`otherOutlet`}}]">xxx</a>

這樣就完成了。

下面再講一下 如何顯示和關閉一個輔助路由的內容,其實就是把插座制空

開啟

<a [routerLink]= "[{outlets: {other: `otherOutlet`}}]"<顯示內容</a>

關閉

<a [routerLink]= "[{outlets: {other: `null`}}]"<顯示內容</a>