Angular 中的 rounting 和 mat-dialogs 之间是否存在常见问题？

Question

我想要做的是通过单击图标来打开 mat-dialog。此 mat-dialog 是一个拆分面板，左侧有可单击的按钮，右侧有一个内容空间，单击特定按钮时应加载其他组件。现在，我遵循原始文档中的指导方针进行路由https://angular.io/guide/router，但是当我单击第一个图标打开对话框时，它的样式发生了变化，不再以对话框的形式打开。现在我想我可以通过在调用对话框的方法中更改 url 来保留对话框样式，如下所示

dialogRef.afterOpened().subscribe(result => {
      this.router.navigate(['/dialog']);
    });
   dialogRef.afterClosed().subscribe(result => {
     this.router.navigate(['']);
    });

像这样，打开和关闭对话框时，url 会按照我想要的方式改变。但是我有另一个带有另一个组件的路由模块，在打开对话框之前，它工作得很好，但之后就不再工作了。现在，通过路由加载组件并<router-outlet>在 html 标签中使用也不起作用。现在，我的问题是 mat-dialog 和路由是否存在一些一般问题，我可以使用其他方法解决这些问题？是否有必要编写自定义对话框（不使用 mat-dialog）？我之前使用服务时一切都运行良好，但我认为更改 url 并通过导航打开组件会少得多的代码，而且是一个更好的解决方案。

希望有人能向我解释这个问题以及实际发生了什么。我可能会提供更通用的代码，但就像我说的，我基本上遵循了官方文档。提前谢谢！