Question

我正在尝试在组件中配置辅助路由，其中路由的内容显示在选项卡

中

在app.component.html

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

variation-margin.routing.module.ts 我正在尝试在组件中配置辅助路由，其中路由的内容显示在选项卡

中

在app.component.html

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

在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 { }

在VariationMarginComponent的模板中，我有标签

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

在futures-margin.routing.module.ts。我没有将此组件用作独立路由，因此不确定这是否重要。

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

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

但futuresMargin中tab2没有显示任何内容。我只看到他的空白标签。

如何配置路径以显示在tab2？

中

Answer 1

事实证明解决方案更简单，路由器链接需要就好像它甚至不知道辅助路由一样

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

如何配置Angular辅助路由？

1 个答案: