辅助路由为了解决一个页面放置多个插座的问题,这很重要。
// 主路由插座写法
<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>