MatDialog 中的“路由器出口”在 Angular 7 中不起作用

Question

<router-outlet></router-outlet>我正在尝试在 Angular Material 弹出对话框中使用。但是，路由器出口部分不会呈现任何内容，也不会将任何内容记录到控制台。

如果我将 添加<router-outlet></router-outlet>到弹出对话框的组件（ContextBuyerPinComponent）的 HTML 内容中，那么它就可以正常工作。

路线如下：

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      { path: 'register-email', component: RegisterEmailComponent },
      {
        path: 'context-buyer-pin',
        component: ContextBuyerPinComponent,
        children: [
          { path: 'services', component: ContextPinServicesComponent },
          { path: 'emails', component: ContextPinEmailsComponent },
          { path: 'details', component: ContextPinDetailsComponent }
        ]
      }
    ]
  }
];

该对话框是通过 ContextBuyerPinComponent 打开的，如下所示 this.matDialog.open(ContextBuyerPinDialogComponent, this.config);：

ContextBuyerPinDialogComponent HTML 如下：

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      { path: 'register-email', component: RegisterEmailComponent },
      {
        path: 'context-buyer-pin',
        component: ContextBuyerPinComponent,
        children: [
          { path: 'services', component: ContextPinServicesComponent },
          { path: 'emails', component: ContextPinEmailsComponent },
          { path: 'details', component: ContextPinDetailsComponent }
        ]
      }
    ]
  }
];

我尝试过使用命名的路由器出口作为替代方案，但没有成功。

工具栏正在使用 app-tab 组件，并且正在使用 routerLinkActive 指令，该指令工作正常，因此看起来路由正在工作。

我怎样才能让它发挥作用？

Answer 1

我已经解决了这个问题，归根结底是对话框窗口显示了弹出对话框窗口的组件。所以基本上是由路由设置问题引起的无限循环。

我解决了更改路径结构并使用命名出口的问题。

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      {
        path: 'context-pin',
        component: ContextPinComponent,
        children: [
          {
            path: 'buyer-pin',
            component: BuyerPinComponent
          }
        ]
      },
    ]
  },
  { path: 'services', outlet: 'popupContent', component: ContextPinServicesComponent },
  { path: 'emails', outlet: 'popupContent', component: ContextPinEmailsComponent },
  { path: 'details', outlet: 'popupContent', component: ContextPinDetailsComponent }
];

存在问题的 stackblitz 项目。

stackblitz 项目提供了解决方案。