Angular 11 中的非模态对话框

Non-modal dialog in Angular 11

快速提问。 到目前为止我找不到答案。 有什么方法可以在最新的 Angular 版本中创建非模态 material 对话框吗?我也在论坛上查看过,但也找不到旧版本 Angular.

的解决方案

非常感谢您的回答。

最良好的祝愿, 尼克

“Angular”本身就是一个框架,因此本身永远不会有这样的特性。

你已经添加了 angular-material 标签,所以我认为这就是你所指的 - MatDialog 可以进一步配置为非模态(尽管这取决于我猜的定义)。

您可以使用 hasBackdrop: false(参见 docs)启用与 MatDialog.

后台元素的交互

您可以添加一些 cdkDrag 魔法(参见 docs)使对话框可拖动。

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

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

如果以上所有内容还不够,使用 Angular CDK 覆盖(这是 MatDialog 如果我没记错的话,实际上是建造的)。见 docs.