将布线添加到Angular2的MdDialog

我需要向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
    ...

然而，这是行不通的。所有这一切只是打开模块，重新路由到

/

，不允许我点击其他链接

---

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

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

bar.component.ts

构造函数(
公共对话：MatDialog，
@注入（文档）私有文档：任意，
专用路由器（路由器）{
dialog.afterOpen.subscribe（（）=>{
如果（！doc.body.classList.contains（'no-scroll'））{
doc.body.classList.add（'no-scroll'）；
}
});
这是openModal（）；
}
openModal（）{
this.dialogRef=this.dialog.open（JazzDialog，this.config）；
this.dialogRef.afterClosed（）.subscribe（（结果：字符串）=>{
this.dialogRef=null；
this.router.navigate（['../']）；
this.doc.body.classList.remove（'no-scroll'）；
});
}

---

您的组件中的路由器插座在哪里？@SurajKhanal我的主应用程序外壳中有

。我简化了上面的代码，但我的应用程序有多个我使用的路由器模块。我主要需要一个对话框的URL，以便用户可以轻松地与其他用户共享信息。添加到FooComponent（父路由组件），以便将所有子路由呈现到该Componenthey@SurajKhanal，我修改了我的原始帖子以更清晰。我的主父组件中已经有

。问题是，bar组件放在MdDialog中，是foo组件的覆盖。谢谢@yurzui，这正是我要找的。我正在玩你的plunk，注意到foo模块的状态在关闭bar对话框后仍然存在。这是我正在寻找的行为，但我惊讶地发现

navigate

没有导致foo的“新鲜”页面。你知道为什么会这样吗？谢谢你的枪好像没用。。我正试着做同样的事情。我想在url处加载一个对话框，然后当它关闭时，导航到父状态。我所能做的就是返回到根状态。afterOpen no scroll做什么？为什么需要它？@Silthus，当显示对话框时，通常不需要正文上的滚动条。

const routes: Routes = [
  {
    path: 'foo/:fooId',
    component: FooComponent,
    children: [
      {
        path: 'bar/:barId',
        component: BarDialogComponent
      }
    ]
  }
];