Angular路由(6)--輔助路由
阿新 • • 發佈:2019-01-08
輔助路由為了解決一個頁面放置多個插座的問題,這很重要。
// 主路由插座寫法
<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>