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.
快速提问。 到目前为止我找不到答案。 有什么方法可以在最新的 Angular 版本中创建非模态 material 对话框吗?我也在论坛上查看过,但也找不到旧版本 Angular.
的解决方案非常感谢您的回答。
最良好的祝愿, 尼克
“Angular”本身就是一个框架,因此本身永远不会有这样的特性。
你已经添加了 angular-material
标签,所以我认为这就是你所指的 - MatDialog 可以进一步配置为非模态(尽管这取决于我猜的定义)。
您可以使用 hasBackdrop: false
(参见 docs)启用与 MatDialog
.
您可以添加一些 cdkDrag
魔法(参见 docs)使对话框可拖动。
我已经快速整理了一份 example on stackblitz。
请注意,该对话框仍将用作“焦点陷阱”,即,如果您一直按 Tab,焦点元素将围绕对话框的内容。
如果以上所有内容还不够,使用 Angular CDK 覆盖(这是 MatDialog
如果我没记错的话,实际上是建造的)。见 docs.