MatDialog中的"router-outlet"在Angular 7中不起作用 [英] 'router-outlet' in MatDialog is not working in Angular 7

问题描述

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

I am trying to use <router-outlet></router-outlet> within an Angular Material popup dialog. However, the router-outlet part does not render anything, or log anything to the console.

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

If I add the <router-outlet></router-outlet> to the HTML content of the component that pops up the dialog(ContextBuyerPinComponent), then it works fine.

路线如下:

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); .

The dialog is opened via the ContextBuyerPinComponent like this: this.matDialog.open(ContextBuyerPinDialogComponent, this.config);.

并且ContextBuyerPinDialogComponent HTML如下:

And the ContextBuyerPinDialogComponent HTML is as follows:

<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>

我尝试使用命名路由器出口作为替代，但是没有成功.

I have tried using a named router-outlet as an alternative, but with no success.

工具栏正在使用app-tab组件，并且正在使用routerLinkActive指令，该指令运行良好，因此看起来路由正在运行.

The toolbar is using the app-tab component, and that is using the routerLinkActive directive which is working fine, so it looks like the routes are working.

如何使它正常工作?

推荐答案

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

I have solved the issue and it boiled down to the fact that the dialog window was showing the component that popped up the dialog window. So basically an infinite cycle caused by a routing setup issue.

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

I fixed the problem changing the path structure and using named outlet.

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

The stackblitz project with the issue.

具有解决方案的stackblitz项目.

The stackblitz project with the solution.

这篇关于MatDialog中的"router-outlet"在Angular 7中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！