Angular 2+ - модальный компонент отображается всегда в одном месте

Question

Я сейчас решаю довольно сложную проблему. Я хотел бы иметь в своем root app.component. html место, где будет отображаться модальное окно, но я также хотел бы использовать именованные router-рулетки, чтобы этот модал был доступен через 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 для рендеринга компонента в зависимости от того, какое условие уместно.