Angular 11 中的非模态对话框

【问题标题】：Non-modal dialog in Angular 11Angular 11 中的非模态对话框
【发布时间】：2021-07-09 06:39:19
【问题描述】：

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

我会很感激你的回答。

最好的祝愿，尼克

【问题讨论】：

您可以使用纯 html/ts/css 来创建您需要的任何内容。到目前为止你尝试了什么？
我想使用材质对话框...我想当我希望它是非模态的时候不能使用材质对话框对吧？
是的，材质对话框几乎是一种抽象，它在对话框中打开您的组件，并公开一个允许您在对话框和主机组件之间进行通信的服务。如果你想在视觉上也有同样的感觉，你可以尝试使用mat-card并将你需要的逻辑放在里面

【解决方案1】：

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

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

您可以使用hasBackdrop: false（请参阅docs）启用与MatDialog 的背景元素交互。

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

我已经快速整理了一个example on stackblitz。

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

如果以上所有内容还不够，那么使用 Angular CDK 覆盖（这是 MatDialog 实际构建的基础，如果我没记错）。请参阅docs。

【讨论】：