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

如何解决路由器插座中的路由器插座使用模块

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

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