代码片段

angular辅助路由

辅助路由是指在路由出口router-outlet中指定一个name标识符，从而将相应的组件映射道匹配的name的路由上，看路由配置

1
2
3
4
5
6
7
8
9
10
const routes: Routes = [
  {path:'',redirectTo:'/home',pathMatch:'full'},
  {path:'chat',component:ChatComponent,outlet:'aux'},
  {path:'home',component:HomeComponent},
  {path:'product/:id',component:ProductComponent,children:[
    {path:'',component:ProductDescComponent},
    {path:'seller/:id',component:SellerInfoComponent}
  ]},
  {path:'**',component:Code404Component}
];

入口模版

1
2
3
4
5
6
7
<a [routerLink]="['/']">主页</a><br/>
<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>

当点击开始聊天时，chat组件就会映射到匹配name的相应路由出口上去,在配置辅助路由同时，也可以配置主路由

1
2
3
<a [routerLink]="[{outlets:{primary:'home',aux:'chat'}}]">开始聊天</a>   
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>