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