«Роутер-аутлет» в MatDialog не работает в Angular 7 - PullRequest
Новая
       46

«Роутер-аутлет» в MatDialog не работает в Angular 7

0 голосов
/ 12 апреля 2019

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

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

Ответы [ 2 ]

0 голосов
/ 14 апреля 2019

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

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

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

0 голосов
/ 12 апреля 2019

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

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

}

...