MatDialog 中的“路由器插座”在 Angular 7 中不起作用

Question

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

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

路线如下所示：

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如下：

<mat-toolbar color="primary" class="mat-elevation-z4">
  <app-tab [icon]="'room_service'" [displayType]="getDisplayType()" [caption]="'Local Services'"
    routerlink="demo/context-buyer-pin/services">
  </app-tab>
  <app-tab [icon]="'email'" [displayType]="getDisplayType()" [caption]="'Emails'"
    routerlink="demo/context-buyer-pin/emails">
  </app-tab>
  <app-tab [icon]="'map-pin'" [displayType]="getDisplayType()" [isSvg]="true" [caption]="'Pin Details'"
    routerlink="demo/context-buyer-pin/details">
  </app-tab>
</mat-toolbar>
<router-outlet></router-outlet>

我尝试使用命名路由器插座作为替代方案，但没有成功。

工具栏正在使用 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 }
];

issue 的 stackblitz 项目。

solution 的 stackblitz 项目。

Answer 2

您是否在代码中添加了以下内容？

{
path: '',
redirectTo: '/',
pathMatch: 'full'

}

Answer 3

据我了解，我认为这是由于 entryComponent 中的路由器插座而发生的。如果我们制作一个 CSS 对话框，那么我们没有任何问题。