Angular Маршрут диалога материалов ведет к бесконечному циклу

Question

Мне нужно реализовать маршруты с Angular Диалогами материалов, чтобы при открытии диалога у меня также был новый URL. Поскольку я не нашел никакой информации в документации по библиотекам, я нашел обходной путь.

Я создал DialogOpenerComponent, который ничего не отображает, но открывает предоставленное диалоговое окно:

@Component({
  template: ''
})
export class DialogOpenerComponent implements OnInit {

  constructor(private router: Router,
              private dialog: MatDialog,
              private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
    const {dialog, config} = this.activatedRoute.snapshot.data;
    this.dialog.open(dialog, config).afterClosed().subscribe(() => {
      this.router.navigate(['../'], { relativeTo: this.activatedRoute });
    });
  }

}

Я также должны предоставить маршруты:

    RouterModule.forRoot([
      {
        path: '',
        children: [
          {
            path: 'flow',
            component: DialogOpenerComponent,
            data: {
              dialog: FlowComponent,
              config: {
                disableClose: true
              }
            }
          }
        ]
      }

и добавить роутер-розетку к html:

<router-outlet></router-outlet>

Теперь это работает как шарм! До одного момента ... Дело в том, что мне нужно добавить router-outlet в мой диалог потока, так что есть какие-то шаги. После этого я попадаю в бесконечное l oop.

Короче говоря, я создал StackBlitz , чтобы вы могли попробовать его самостоятельно ( ВНИМАНИЕ: Нажав на Flow гиперссылка почти наверняка взломает sh ваш браузер! ).

Answer 1

Вы должны создать модуль и розетку маршрутизатора в этом модуле, чтобы у модуля была своя собственная розетка маршрутизатора, которая не создает этот тип l oop