4

我需要向 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
      }
    ]
  }
];

但是，这不起作用。所有这一切都是打开模块，重新路由到/，并且不允许我单击其他链接。

有人有什么建议或想法吗？谢谢！

4

1 回答 1

5

实现这一目标的简单方法如下

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 示例

于 2017-06-16T07:01:12.920 回答