'router-outlet' в MatDialog не работает в Angular 7

Я пытаюсь использовать <router-outlet></router-outlet> во всплывающем диалоговом окне Angular Material. Однако часть маршрутизатора-выхода ничего не отображает и ничего не записывает в консоль.

Если я добавлю <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);.

А HTML-код ContextBuyerPinDialogComponent выглядит следующим образом:

<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, которая работает нормально, поэтому похоже, что маршруты работают.

Как мне заставить это работать?


angular angular7 router-outlet angular-material-7
person Mike Coxeter    schedule 12.04.2019    source источник
comment
Проблема проиллюстрирована здесь, на stackblitz stackblitz.com/edit/angular-material2-issue-dehbgc   -  person Mike Coxeter    schedule 13.04.2019
comment
Ключом к разгадке может быть необходимость добавить защиту в строку 18 context-Buyer-pin.component.ts. Без этого браузер выйдет из строя, очевидно, зациклившись.   -  person Mike Coxeter    schedule 13.04.2019

Ответы (3)


arrow_upward
3
arrow_downward

Я решил проблему, и все сводилось к тому, что в диалоговом окне отображался компонент, открывший диалоговое окно. Таким образом, в основном бесконечный цикл, вызванный проблемой настройки маршрутизации.

Я исправил проблему, изменив структуру пути и используя именованный выход.

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 с решением.

person Mike Coxeter    schedule 14.04.2019

arrow_upward
0
arrow_downward

Вы добавили в свой код следующее?

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

}

person Shilpa Soni    schedule 12.04.2019
comment
Спасибо за ответ, но в данном случае это не помогло. Вы можете увидеть проблему здесь: stackblitz.com/edit/angular-material2-issue-dehbgc - person Mike Coxeter; 13.04.2019

arrow_upward
0
arrow_downward

Насколько я понимаю, я думаю, что это происходит из-за роутера в entryComponent. Если мы создадим диалоговое окно CSS, у нас не будет никаких проблем.

person Rafay Jamal    schedule 27.01.2020
comment
Здравствуйте, добро пожаловать в S.O https://stackoverflow.com/help/how-to-answer, пожалуйста, ознакомьтесь с этим и предоставьте надлежащие сведения - person Prateik Darji; 27.01.2020