MatDialog中的'router-outlet'在Angular 7中不起作用

Question

我想在Angular Material弹出对话框中使用<router-outlet></router-outlet>。但是，路由器插座部件不会渲染任何内容，也不会将任何内容记录到控制台。

如果我将<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如下：

<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

你在代码中添加了以下内容吗？

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

}

Answer 2

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

我修复了更改路径结构和使用命名插座的问题。

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项目。