如何配置Angular辅助路由？

Question

I am trying to configure secondary routes within a component where the content of the routes are displayed in tabs

In app.component.html

<a class="list" [routerLink]="[{outlets:{primary:'variationMargin', futuresMargin:'futuresMargin'}}]" routerLinkActive="router-link-active">Projected VM</a>

In variation-margin.routing.module.ts I am trying to configure secondary routes within a component where the content of the routes are displayed in tabs

In app.component.html

<a class="list" [routerLink]="[{outlets:{primary:'variationMargin', futuresMargin:'futuresMargin'}}]" routerLinkActive="router-link-active">Projected VM</a>

In variation-margin.routing.module.ts

const routes: Routes = [{
    path: 'variationMargin',
    component: VariationMarginComponent,
    canActivate: [AuthGuard],
}, {
    path: 'futuresMargin,
    component: FuturesMarginComponent,
    canActivate: [AuthGuard],
    outlet: 'futuresMargin'
}];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class VariationMarginRoutingModule { }

Within the template for VariationMarginComponent I have tabs

tab1 -> the primary route i.e. the VariationMarginComponent
tab2 -> <router-outlet name='futuresMargin'></router-outlet>

In futures-margin.routing.module.ts . I am not using this component as a standalone route so not sure if this matters.

const routes: Routes = [{
    path: AppSettings.FuturesMarginRoute,
    component: FuturesMarginComponent,
    canActivate: [AuthGuard],
    outlet: 'futuresMargin'
}];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class FuturesMarginRoutingModule { }

However nothing is showing up for futuresMargin in tab2 . I see just he the blank tab.

How should I configure the route for it to show up in the tab2 ?

Answer 1

事实证明，解决方案要简单得多，而且路由器链接必须好像它甚至不知道辅助路由一样

<a class="list" routerLink='variationMargin routerLinkActive="router-link-active">Projected VM</a>