angular路由詳解五（輔助路由）

在HTML文件中

//主路由

<router-outlet></router-outlet>

//輔助路由

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

 

配置

{path:'xxx',component:XxxComponent}

{path:'yyy',component:YyyComponent,outlet:"aux"}

 

<a [routerLink] = "['/xxx',{outlet:{aux:'xxx'}}]">Xxx</a>

<a [routerLink] = "['/yyy',{outlet:{aux:'yyy'}}]">Yyy</a>

//primary   決定主路由的路徑  點擊a標簽主路由到Zzz組件，輔助路由到Yyy組件

<a [routerLink] = "['/yyy',{outlet:{primary:‘zzz’ aux:'yyy'}}]">Yyy</a>