Angular 11 中的非模态对话框

Question

快速提问。到目前为止我找不到答案。有没有办法在最新的 Angular 版本中创建非模态材质对话框？我还在论坛中查找过这个问题，但也找不到针对旧版本 Angular 的解决方案。

我希望得到答复。

最美好的祝愿，尼克

Answer 1

“Angular”本身就是框架，因此本身永远不会有这样的功能。

您已经添加了angular-material标签，所以我假设这就是您所指的 - 有MatDialog可以进一步配置为非模态（尽管这取决于我猜测的定义）。

您可以使用hasBackdrop: false（请参阅文档）启用与后台元素的交互MatDialog。

您可以添加一些cdkDrag魔法（请参阅文档）以使对话框可拖动。

我在 stackblitz 上整理了一个简单的例子。

请注意，该对话框仍将充当“焦点陷阱”，即，如果您继续按 Tab，焦点元素将围绕对话框的内容旋转。

MatDialog如果上述所有内容还不够，那么使用 Angular CDK 覆盖层（如果我没记错的话，这是实际构建的基础）来实现自己的服务来生成完全非模式对话框应该相当容易。请参阅文档。