MatDialog 中的“路由器插座"在 Angular 7 中不起作用 [英] 'router-outlet' in MatDialog is not working in Angular 7

问题描述

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

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

路线如下所示:

const demoRoutes: Routes = [{路径:'演示'，孩子们: [{ path: 'register-email', 组件: RegisterEmailComponent },{路径:'context-buyer-pin',组件:ContextBuyerPinComponent，孩子们: [{ path: 'services', 组件: ContextPinServicesComponent },{ path: 'emails', 组件: ContextPinEmailsComponent },{ 路径:'详细信息'，组件:ContextPinDetailsComponent }]}]}];

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

ContextBuyerPinDialogComponent HTML 如下:

<app-tab [icon]="'room_service'" [displayType]="getDisplayType()" [caption]="'本地服务'"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><路由器插座></路由器插座>

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

工具栏正在使用 app-tab 组件，即使用了工作正常的 routerLinkActive 指令，所以看起来路由正在工作.

我如何让它工作?

解决方案

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

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

const demoRoutes: Routes = [{路径:'演示'，孩子们: [{路径:'上下文引脚'，组件:ContextPinComponent，孩子们: [{路径:'买家密码'，组件:BuyerPinComponent}]},]},{ path: 'services', outlet: 'popupContent', 组件: ContextPinServicesComponent },{ path: 'emails', outlet: 'popupContent', 组件: ContextPinEmailsComponent },{ path: 'details', outlet: 'popupContent', 组件: ContextPinDetailsComponent }];

stackblitz 项目与问题.

带有解决方案的stackblitz项目.

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.

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.

The routes look like this:

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 }
        ]
      }
    ]
  }
];

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

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.

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.

How do I get this 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 }
];

The stackblitz project with the issue.

The stackblitz project with the solution.

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