(七)、Angular4.0 辅助路由

插座(<router-outlet></router-outlet>) -> 一个标签

一、辅助路由案例思路

1. 在app组件的模板上再定义一个插座来显示聊天面板
2. 单独开发一个聊天室组件，只显示在新定义的插座上
3. 通过路由参数控制新插座是否显示聊天面板

二、在主页 app.component.html 后面新增一个插座

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

三、新建聊天室组件 chat

ng g component chat

四、修改chat、home、product组件的样式

五、chat.component.html    chat.component.css

<textarea placeholder="请输入聊天内容" class="chat"></textarea>

.chat {
  background: green;
  height: 100px;
  width: 30%;
  float: left;
  box-sizing: border-box;
}

六、product.component.html    product.component.css

<div class="product">
  <p>
    这里是商品信息组件
  </p>
  <p>
    商品ID ： {{productId}}
  </p>
  <a [routerLink]="['./']">商品描述</a>
  <a [routerLink]="['./seller',99]">销售员信息</a>
  <router-outlet></router-outlet>
</div>

.product {
  background: yellow;
  height: 100px;
  width: 70%;
  float: left;
  box-sizing: border-box;
}

七、home.component.html    home.component.css

<div class="home">
  <p>
    这里是主页组件
  </p>
</div>

.home {
  background: red;
  height: 100px;
  width: 70%;
  float: left;
  box-sizing: border-box;
}

八、在app-routing.module.ts中配置路由

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

九、在app.component.html中增加两个链接(开始聊天和结束聊天)

<a [routerLink]="['/home']">主页</a>
<a [routerLink]="['/product',1]">商品详情页</a>
<input type="button" value="商品详情" (click)="toProductDetails()"/>
<a [routerLink]="[{outlets: {aux: 'chat'}}]">开始聊天</a>
<a [routerLink]="[{outlets: {aux: null}}]">结束聊天</a>
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

十、启动项目，访问localhost:4200 点击开始聊天出现绿框，结束聊天绿框消失，而且与主页链接和商品详情链接互不影响

十一、在app.component.html的开始聊天的a标签上做出修改，添加primary属性，当点击开始聊天时，显示绿色聊天框并跳到主页,

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

十二、刷新页面测试即可