辅助路由

1.app html

<a [routerLink]="['/home']">主页</a>
<a [routerLink]="['/product',2]">商品详细</a>
<input type="button" value="商品目录" (click)="toProductDetail()">
<a [routerLink]="[{outlets:{primary: 'home',talkroom:'chat'}}]">开始聊天</a>
<a [routerLink]="[{outlets:{talkroom:null}}]">结束聊天</a>
<router-outlet></router-outlet>
<router-outlet name="talkroom"></router-outlet>

2.app-routing

const routes: Routes = [
  {path: '', redirectTo: '/home',pathMatch:'full'},
  {path: 'home', component:HomeComponent},
  {path: 'chat', component:ChatComponent, outlet:'talkroom'},
  {path: 'product/:id', component:ProductComponent,children:[
     {path: '', component:ProductDescComponent},
     {path: 'sellerID/:id', component:SellerInfoComponent}
    ]},
  {path: '**', component:Code404Component},
];

 

3.其它css

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

chat html

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