Angular 模态框组件 | ng-hub-ui-modal

无障碍的 Angular 模态框组件，支持堆叠、全屏模式、模板、键盘处理和 CSS 变量，适用于 standalone 应用。

最后更新 2026年8月21日

概览

团队为何搜索这个库

这个 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 22.6.0 - 8/17/26, 12:00 AM

added: The dialog now travels between heights instead of jumping. A modal is sized by whatever it holds, so a wizard step or an async panel changing would snap the box to its new height in a single frame. The obvious repair does not work and was measured rather than assumed: the specified height is auto before the change and auto after it, and a CSS transition only fires when the specified value changes — the content moved, the property did not. interpolate-size does not help either; it interpolates to a keyword, it does not notice a box growing underneath one. So both heights are measured and animated explicitly, which also behaves identically in every browser. Tuned with --hub-modal-resize-duration and --hub-modal-resize-easing, disabled by [animation]="false" and by prefers-reduced-motion. Width already animated and is untouched.

Version 22.5.1 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.5.0 - 7/27/26, 12:00 AM

changed: Typed modal flows: open<C, R, D>(content, options) infers the content component type, so HubModalRef.componentInstance is the component instance (no more as unknown as casts); R types the result end to end (close(result?), result: Promise<R>, closed: Observable<R>, HubActiveModal<D, R>) and HubModalOptions<D> types the data payload. All generics default to the previous loose types, so existing call sites compile unchanged.

Version 22.4.2 - 7/26/26, 12:00 AM

fixed: Declared the real ng-hub-ui-utils peer range (>=22.0.0); the previous >=1.0.0 floor allowed resolving an incompatible utils major.

Version 22.3.0 - 7/5/26, 12:00 AM

added: Typed modal payload: inject the new HUB_MODAL_DATA token or use inject(HubActiveModal).data (HubActiveModal is now generic, HubActiveModal<D>) instead of the old untyped data field (now deprecated).

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

相关库

ng-hub-ui-portal ng-hub-ui-utils