``` 多重路由:通過命名出口在頁面中顯示多個路由 ``` >[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 方法指向完整的絕對路徑