``` 多重路由:通过命名出口在页面中显示多个路由 ``` >[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 方法指向完整的绝对路径