为Angular2添加到MdDialog的路由

Question

我需要添加路由到MdDialog组件,我不知道解决这个问题的最佳方法是什么.

目前,在foo page(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示例