Question

我正在尝试在“角度材料”弹出对话框中使用<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项目。

Answer 3

据我了解，我认为这是由于entryComponent中的路由器出口引起的。如果我们创建一个CSS对话框，则不会有任何问题。

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

3 个答案: