为Angular2添加到MdDialog的路由

发布时间：2020-12-17 17:28:44 所属栏目：安全来源：网络整理

导读：我需要添加路由到MdDialog组件,我不知道解决这个问题的最佳方法是什么. 目前,在foo页面(www.app.com/foo/1)上,用户可以单击一个按钮,它将打开一个MdDialog组件,栏. 我想要做的是,在打开MdDialog时,它会将/ bar /：id附加到组件.因此,例如它将类似于www.app.c

我需要添加路由到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
      }
    ]
  }
];

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

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

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!