2

我正在尝试<router-outlet></router-outlet>在 Angular Material 弹出对话框中使用。但是，router-outlet 部分不会渲染任何内容，也不会将任何内容记录到控制台。

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

路线如下所示：

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 指令，因此看起来路由正在运行。

我如何让这个工作？

4

3 回答 3

4

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

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

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

带有解决方案的 stackblitz 项目。

于 2019-04-14T03:54:57.317 回答
0

您是否将以下内容添加到您的代码中？

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

}

于 2019-04-12T13:12:49.873 回答
0

据我了解，我认为这是由于 entryComponent 中的路由器插座而发生的。如果我们制作一个 CSS 对话框，那么我们没有任何问题。

于 2020-01-27T13:20:31.650 回答