angular - 将路由添加到 Angular2 的 MdDialog

Question

我需要将路由添加到 MdDialog 组件，但我不确定解决此问题的最佳方法是什么。

目前，在 foo 页面 (www.app.com/foo/1) 上，用户可以单击一个按钮，它将打开一个 MdDialog 组件，bar。

我想要做的是，在打开 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');
  });
}

Plunker Example