Добавьте маршрутизацию в MdDialog для Angular2

Question

Мне нужно добавить маршрутизацию к компоненту MdDialog, и я не уверен, что лучший способ решить эту проблему.

В настоящее время пока на странице foo (www.app.com/foo/1), пользователь может нажать кнопку, и он откроет компонент MdDialog, панель.

То, что я хочу сделать, при открытии MdDialog, он будет добавлять /bar/:id к компоненту. Так, например, это будет что-то вроде www.app.com/foo/1/bar/1, Цель состоит в том, чтобы пользователь имел доступную ссылку, которая может привести к foo, а затем открыл MdDialog.

Пока что так устроено мое приложение.

app/
  app.component.html <- <router-outlet> is found here
  app.component.ts
  app.module.ts

  foo/
    foo-routing.module.ts
    foo.component.html
    foo.component.ts
    foo.module.ts

    bar/
      bar.component.html <- This bar component file for the MdDialog
      bar.component.ts

  baz/ <- Another section of the website with it's own routing
    baz-routing.module.ts
    baz.component.html
    baz.component.ts
    baz.module.ts
    ...

В настоящее время в моем foo-routing.module.ts, У меня есть это:

const routes: Routes = [
  {
    path: 'foo/:fooId',
    component: FooComponent,
    children: [
      {
        path: 'bar/:barId',
        component: BarDialogComponent
      }
    ]
  }
];

Однако это не работает. Все это делает, это открывает модуль, перенаправляет к /и не позволяет мне переходить по другим ссылкам.

У кого-нибудь есть предложения или идеи? Спасибо!

Answer 1

Простой способ добиться этого может быть следующим

bar.component.ts

constructor(
  public dialog: MatDialog, 
  @Inject(DOCUMENT) private doc: any, 
  private router: Router) {
  dialog.afterOpen.subscribe(() => {
    if (!doc.body.classList.contains('no-scroll')) {
      doc.body.classList.add('no-scroll');
    }
  });

  this.openModal();
}

openModal() {
  this.dialogRef = this.dialog.open(JazzDialog, this.config);

    this.dialogRef.afterClosed().subscribe((result: string) => {
    this.dialogRef = null;
    this.router.navigate(['../']);
    this.doc.body.classList.remove('no-scroll');
  });
}

Пример плунжера