4

Angular 8无法匹配延迟加载模块的辅助（命名）出口上的任何路由

大家好，

是的，这个问题被认为是一个重复的问题。我已经从这里阅读了讨论Angular 5 Cannot match any routes on named outlet of lazy loading module

我已经按照这个例子https://stackblitz.com/edit/angular-material-dialog-issue-resolved?file=app%2Fdemo%2Fbuyer-pin%2Fbuyer-pin.component.ts在 mat 对话框中进行路由.

但是，在我的情况下，命名路由无法与下面的错误屏幕匹配： 在此处输入图像描述

我在做什么：

在 app.routing 中：它正在导航（新引号）

const routes: Routes = [
{
    path: '',
    loadChildren: () => import('./views/dashboard/dashboard.module').then(m => m.DashboardModule)
},
{
    path: 'new-equote',
    loadChildren: () => import('./views/new-equote/new-equote.module').then(m => m.NewEquoteModule)
}
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})

在 new-equote.routing 中，我正在路由到另一个子模块（product-journey）：

      const routes: Routes = [
    {
      path: '',
      component: NewEquoteComponent,
      children: [
        {
          path: 'product-selection',
          component: ProductSelectionComponent,
        },
        {
          path: 'product-journey',
          loadChildren: () => import('./product-selection/product-journey/product-journey.module').then(m => m.ProductJourneyModule)

        }
      ]
    }
  ];

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

最后，在 product-journey 路由模块中，我重定向到一个空组件，该组件根据我下面的示例打开对话框（上面给出了链接）：

      const routes: Routes = [
    {
      path: '',
      redirectTo: '/new-equote/product-journey/dialog(step:product)',
      pathMatch: 'full'
    },
    {
      path: 'dialog',
      component: ModalContainerComponent
    },
    { path: 'product', outlet: 'step', component: ProductDetailsComponent },
    { path: 'coverage', outlet: 'step', component: CoverageDetailsComponent },
  ];

这就是我在 router-outlet 中传递名称的方式：

 <router-outlet name="step"></router-outlet>

这是调用对话框打开功能的空组件（对话框容器）：

        constructor(
      private router: Router,
      private route: ActivatedRoute,
      private dialog: MatDialog,
      public store: Store, ) {
        this.openDialog();
    }
    openDialog() {
      const dialogRef = this.dialog.open(ProductJourneyComponent);
    }

一旦我想导航到 /new-equote/product-journey/dialog(step:product)，

错误来了：错误：无法匹配任何路由。URL 段：“产品”

我花了几个小时来解决这个问题，但没有运气。

4

0 回答 0