辅助路由

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>