路由器插座中的路由器插座使用模块

时间:2021-04-16 07:24:40

标签: angular router-outlet

我有一个小问题,如何在模块上划分的插座中使用插座。我有一个路由器出口,它打开包含 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 

enter image description here

你能帮我解决这个问题吗?

0 个答案:

没有答案