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');
  });
}

<强> Plunker Example

为Angular2添加到MdDialog的路由

1 个答案: