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>