routerOutLet的name属性--辅助路由

辅助路由

特点：在一个页面上可以定义多个插座
  1、  除需要中模板上面声明一个<router-outlet>的主插座以外，还需要声明一个带name属性的插座
    <router-outlet name="text'></router-outlet >
  2、在路由配置里面配置名叫‘aux’这个插座上可以显示那些组件，
    例： {path: 'xxx',component: XxxComponent,outlet: 'aux'}
         {path: 'yyy',component: YyyComponent,outlet: 'aux'}
  3.在导航的时候需要指定从路由到某一地址的时候在辅助的路由上显示那个组件
    例   <a[routerLink]= “[’/home'，{outlets: {text: ‘xxx'}}]>Xxx</a>
         <a[routerLink]= “[’/product'，{outlets: {text: ‘yyy'}}]>Yxx</a>

案例：
    在App组件的模板上再定义一个插座来显示聊天面板

//添加两个控制组件：注意routerLink的书写形式改变
添加primary后，无论在哪个页面，点击聊天，都会回到home的路由页面
//<a [routerLink]="[{outlets: {primary: 'home',text: 'chat'}}]">开始聊天</a>
<a [routerLink]="[{outlets: {text: 'chat'}}]">开始聊天</a>
<a [routerLink]="[{outlets: {text: null}}]">结束聊天</a>
<router-outlet name="text"></router-outlet>

单独开发一个聊天室组件，只显示在新定义的插座上

<!--ng g component chat创建组件，书写样式-->
<textarea placeholder="请输入聊天内容" >

</textarea>

通过路由参数控制新插座是否显示聊天面板

 // 配置路由 添加outleta属性,意思是我这个理由需要配置在哪个插座上
  {path: 'chat', component: ChatComponent, outlet: 'text'},