我有一个小问题,如何在模块上划分的插座中使用插座。我有一个路由器出口,它打开包含 modalComponent 的组件的路由。 ModalComponent 有孩子,但在其他模块中。我想在 ModalComponent 下一个路由器插座中实现以显示孩子们。
应用路由模块
const routes: Routes = [
{
path: '',
redirectTo: '/component1',
pathMatch: 'full'
},
{
path: 'component1',
component: component1Component,
children: [
{
path: 'modal',
component: ModalComponent,
loadChildren: () => import('./common/common.module').then(m => m.SharedModule)
}
]
}
];
通用模块:
const commonRoutes: Routes = [
{
path: 'component2',
component: component2Component,
outlet: 'auxoutlet'
}
];
export const CommonRoutesModule = RouterModule.forChild(commonRoutes);
@NgModule({
imports: [
CommonModule,
CommonRoutesModule,
],
declarations: [
ModalComponent,
],
})
export class SharedModule {
}
第一个路由器出口在 app-component 中,第二个在 ModalComponent 中:
<a routerLink="canvas/(auxoutlet:component2)" routerLinkActive="active">component2_test1</a>
<a [routerLink]="[{outlets: {auxoutlet: ['component2']}}]" routerLinkActive="active">component2_test2</a>
<router-outlet name="auxoutlet"></router-outlet>
当我点击 component2_test1 或 component2_test2 时,我得到了
<块引用>错误:无法匹配任何路由。
Ths is my scenario
你能帮我解决这个问题吗?