Angular之辅助路由

辅助路由

 即我们在某些场景路由加载组件时，还需要加载另外一些只负责显示的组件，此时我们可以使用辅助路由

定义组件

<a [routerLink]="[{outlets:{primary:'test2',aux1:'consult'}}]"   routerLinkActive="active">Test1</a>
<a [routerLink]="[{outlets:{aux:null}}]"   routerLinkActive="active">Test2</a>
<a [routerLink]="[ '/test1' ]"   routerLinkActive="active">Test1</a>
<router-outlet></router-outlet>
<router-outlet name="aux1"></router-outlet><!--定义一个aux1的辅助路由的出口 -->

当我们点击Test1时，<router-outlet></router-outlet>就会指向{outlets:{primary:'test2',aux1:'consult'}}中的primary对应的路由的组件

 <router-outlet name="aux1"></router-outlet>指向aux1:consult的路由

定义路由

const routes: Routes = [
  { path: '', redirectTo: '/test1', pathMatch: 'full' },
  { path: 'test1',component: Test1Component},
  { path: 'test2',component: Test2Component},
  { path: '**', component:Test1Component },
  { path: 'consult',component: Test2Component,outlet:"aux1"},

];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { enableTracing: false })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

{ path: 'consult',component: Test2Component,outlet:"aux1"}就是我们定义的辅助路由。

实现效果