angular - Angular 11 中的非模态对话框

Question

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

我将不胜感激。

最好的祝愿，尼克

Answer 1

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

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

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

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

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

请注意，对话框仍将作为“焦点陷阱”工作，即如果您一直按 Tab，则焦点元素将围绕对话框的内容。

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