Angular 模态框组件 | ng-hub-ui-modal
无障碍的 Angular 模态框组件，支持堆叠、全屏模式、模板、键盘处理和 CSS 变量，适用于 standalone 应用。
概览
团队为何搜索这个库
这个 Angular 模态框组件专为需要在 standalone Angular 应用中实现无障碍对话框、可组合内容、服务驱动控制以及对设计系统友好样式的团队而打造。
安装
npm install ng-hub-ui-modal跳转到
适用于
- 确认对话框
- overlay 中的表单
- 详情面板
- 堆叠工作流
关于 modal
ng-hub-ui-modal 解决了 Angular 产品中最常见的 UI 需求之一：打开在生产环境中表现稳健的对话框。它覆盖了堆叠模态框、全屏流程、键盘处理、内容投影以及基于服务的用法，从而避免让模态框逻辑成为每个项目的难题。
功能指南
打开 modals（内容类型）
演示如何使用 TemplateRef、Component 和 String 内容打开 modals。
配置与选项
自定义 modal 的外观和行为
Modal 引用（HubModalRef）
控制并访问已打开 modals 的状态
活动 modal（HubActiveModal）
从 modal 的内容内部与其交互
堆栈管理
管理多个堆叠的 modals
核心特性
最近更改
Version 21.0.2 - 3/31/26, 12:00 AM
changed: Standardized padding variables and improved fullscreen layout responsiveness.
Version 21.0.1 - 3/19/26, 12:00 AM
changed: Removed hardcoded design system token defaults from stylesheet; all --hub-modal-* variables retain literal fallback values.
fixed: Fixed modal-backdrop and modal unit test reliability.
Version 21.0.0 - 3/10/26, 12:00 AM
added: HubModalPlacement configuration for anchored modal positioning.
changed: BREAKING: Standardized CSS class names to hub-modal BEM convention.
Version 1.2.0 - 1/7/25, 12:00 AM
added: Documentation and examples update