```
多重路由:通過命名出口在頁面中顯示多個路由
```
>[info]模板還可以有多個命名的路由出口。 每個命名出口都自己有一組帶組件的路由。 多重出口可以在同一時間根據不同的路由來顯示不同的內容。
1.添加命名路由出口
> 在`src/app/app.component.html`中添加一個名叫“popup”的路由出口
```
<div [@routeAnimation]="getAnimationData(routerOutlet)">
<router-outlet #routerOutlet="outlet"></router-outlet>
</div>
<router-outlet name="popup"></router-outlet> //添加名為popup的路由出口
```
2.第二路由
>[info] 命名出口是第二路由的目標
第二路由很像主路由,配置方式也一樣。它們只有一些關鍵的不同點:
* 它們彼此互不依賴。
* 它們與其它路由組合使用。
* 它們顯示在命名出口中。
創建一個組件當作第二路由:`ng generate component compose-message`
>[info] src/app/compose-message/compose-message.component.ts
3.添加第二路由
打開`AppRoutingModule`,并把一個新的`compose`路由添加到`appRoutes`中。
```
{
path: 'compose',
component: ComposeMessageComponent,
outlet: 'popup' //把這個路由綁定到名為'popup' 的路由出口
}
```
4.第二路由導航
```
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
//popup: ['compose'] "popup"路由出口加載"compose"路由
//"popup"為路由出口的名稱
//"compose"為這個路由出口加載的路由路徑
```
5.清空第二路由
> 每個第二出口都有自己獨立的導航,跟主出口的導航彼此獨立。 修改主出口中的當前路由并不會影響到`popup`出口中的。這就是為什么在危機中心和英雄管理之間導航時,彈出框始終都是可見的。
```
closePopup() {
// 清除第二路由
this.router.navigate([{ outlets: { popup: null }}]);
}
```
把`popup`這個路由出口設置為`null`會清除該出口,并且從當前 URL 中移除第二路由`popup`。
*****
>[info] # 簡易理解:
## 多個路由區域
~~~
{ path: 'news', outlet:'let1' component: NewsComponent }
{ path: 'news', outlet:'let2' component: News2Cmponent }
~~~
~~~
<router-outlet name="let1"></router-outlet>
<router-outlet name="let2"></router-outlet>
~~~
即訪問`/news/`時同時加載`NewsComponent`和`News2Cmponent`兩個組件
## 鏈接及訪問
~~~
<a routerLink="/detail/1" routerLinkActive="active">detail</a>
<a [routerLink]="['/detail', news.id]">{{news.title}}</a>
<a [routerLink]="[{ outlets: { let2: ['news'] } }]">Contact</a>
~~~
`routerLinkActive="active"`即在本路由激活時添加樣式`.active`
<p style="margin-left:10px;">或</p>
```
import { Router } from '@angular/router';
// ...
constructor(private router: Router) {}
// ...
this.router.navigate(['/detail', this.news.id])
this.router.navigate([{ outlets: { let2: null }}]);
```
navigateByUrl 方法指向完整的絕對路徑
- 目錄結構
- 架構
- 指令
- 數據綁定
- 結構性指令
- 屬性型指令
- 自定義指令
- 模板引用變量
- 屬性綁定
- 事件綁定
- 組件
- 組件交互
- 管道
- 自定義管道
- 動態組件
- 變量檢測機制
- 組件生命周期
- 路由
- 路由配置
- 路由導航
- 路由傳值
- 父子路由
- 路由事件
- 頂級路由和特征路由
- 多重路由
- 路由守衛
- 路由守衛-簡單理解
- 路由惰性加載
- 路由預加載
- 路由動畫
- 網絡請求
- GET請求
- POST請求
- JSOP請求
- 封裝的http請求
- http攔截器
- 表單
- 響應式表單
- 驅動式表單
- CLI命令
- 啟動應用
- 創建項目
- 創建組件
- 創建服務
- 創建路由守衛
- 創建特征模塊
- 創建自定義指令
- 創建自定義管道
- 相關概念
- 急性加載
- 惰性加載
- 特征模塊
- 常見問題
- 全局的Angular CLI大于本地的Angular CLI
- 包體優化