angular(三)辅助路由

为什么要使用辅助路由？辅助路由有什么作用？

无论路由如何导航，页面如何跳转，辅助路由导航的组件始终在页面上不会消失；如同一个网站需要聊天组件，而已要求聊天组件始终在页面上显示时，就需要使用辅助路由。当然，辅助路由除了这个主要作用，还有其他的作用。

每个组件具有1个主路由和0个或N个子路由出口。

使用辅助路由的步骤

• 定义辅助路由出口（插座）。辅助路由的出口定义和主路由一样，只是辅助路由比主路由多了1个name属性：用来指定辅助路由显示哪几个组件。如下所示：

  <router-outlet></router-outlet>
  <router-outlet name="aux"></router-outlet>

   

• 配置路径。辅助路由路径，必须加1个outlet属性，指定该辅助路由的出口名字。如下所示：

  {path:'chat',component:XhatComponent,outlet:'aux'},

   

• 配置路由入口。辅助路由的参数将是一个对象，这个对象里面有一个属性outlets，这个属性的值也是一个对象，该对象里面传一个name属性指定要显示的辅助路由的名字，值是该辅助路由需要显示的组件路径；比如下面：名字叫aux的辅助路由将显示路径为chat的组件

  需要注意的是当不希望辅助路由显示的时候可以吧name设置为null。

  这里指点击开始聊天的时候加载路径为chat对应的组件，显示在名字叫做aux的辅助路由出口上。

  <a [routerLink]="[{outlets:{aux:'chat'}}]">开始聊天</a>
  <a [routerLink]="[{outlets:{aux:null}}]">结束聊天</a>

  当希望跳转辅助路由的同时主路由跳转到指定的组件的时候：可以在入口文件加一个属性：primary,属性的值是需要跳转的主组件的路由路径例如下面点击聊天的同时不管目前在哪个组件下主路由都会跳转回home路径下的组件，如下所示

  <a [routerLink]="[{outlets:{primary:home, aux:'chat'}}]">开始聊天</a>