'router-outlet' 在 MatDialog 中无法在 Angular 7 中工作

Question

我正在尝试在 Angular Material 弹出对话框中使用 <router-outlet></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);.

而ContextBuyerPinDialogComponentHTML如下：

<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

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

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

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 3

据我了解，我认为这是由于 entryComponent 中的 router-outlet 造成的。如果我们制作一个 CSS 对话框，那么我们没有任何问题。

'router-outlet' 在 MatDialog 中无法在 Angular 7 中工作

'router-outlet' in MatDialog is not working in Angular 7

router-outlet

angular

angular7

angular-material-7