Angular 2+ - 模态组件总是在同一个地方呈现

Question

我目前正在解决相当棘手的问题。我想在我的根 app.component.html 位置，那里将呈现模态 window，但我也想使用命名路由器路由，以便通过 URL 获得此模态。

我的路由器阵列看起来像：

const routes: Routes = [
  { path: '', redirectTo: '/admin/orders', pathMatch: 'full' },
  {
    path: 'admin/orders',
    component: OrdersComponent,
    canActivate: [AuthGuard],
    children: [
      { path: '', component: OrderListComponent },
      {
        path: ':id',
        component: OrderDetailComponent,
        outlet: 'modal'
      }
    ]
  },
  { path: 'admin/stats', canActivate: [AuthGuard], component: StatsComponent },
  { path: 'admin/settings', canActivate: [AuthGuard], component: SettingsComponent },
  { path: 'admin/user', canActivate: [AuthGuard], component: UserComponent },
  { path: 'auth', component: AuthComponent }
];

所以挑战在于以某种方式将 OrderDetailComponent 渲染到 app.component.html:

<div class="app">
  <app-navigation></app-navigation>
  <app-header></app-header>
  <main class="app__content">
    <router-outlet></router-outlet>
  </main>
  <!-- HERE I WANT TO RENDER MODAL CONTENT -->
</div>

当然，解决这个问题的一种方法是使用 OrdersComponent 的另一个路由路径，如下所示：

  {
    path: 'admin/orders',
    component: OrdersComponent,
    canActivate: [AuthGuard],
    outlet: 'modal',
    children: [
      {
        path: ':id',
        component: OrderDetailComponent,
      }
    ]
  }

然后在 app.component.html:

<div class="app">
  <app-navigation></app-navigation>
  <app-header></app-header>
  <main class="app__content">
    <router-outlet></router-outlet>
  </main>
  <router-outlet name="modal"></router-outlet>
</div>

但是这里的问题是它会调用我两次AuthGuard。

如果有任何建议可以指导我如何正确解决此问题，我将不胜感激。

谢谢

Answer 1

难道按照下面的方法解决不了吗？

<div class="app">
  <app-navigation></app-navigation>
  <app-header></app-header>
  <main class="app__content">
    <router-outlet></router-outlet>
  </main>
  <app-order-detail></app-order-detail>
</div>

然后使用 *ngIf 根据相关条件渲染组件。

Angular 2+ - 模态组件总是在同一个地方呈现

Angular 2+ - modal component rendered always at same place

angular-routing

router-outlet

angular