API 参考

这里是 modal 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

输入

通过 14 个输入项精细调校 modal。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`animation`	`boolean`	—	若为 true，模态框的打开和关闭将带有动画。默认值：true
`backdrop`	`boolean \| "static"`	—	若为 true，将创建背景遮罩元素。或者指定 "static" 以创建点击时不关闭模态框的背景遮罩。默认值：true
`centered`	`boolean`	—	若为 true，模态框将垂直居中。默认值：false
`placement`	`HubModalPlacement`	—	控制模态框在视口中的放置位置。默认值：HubModalPlacement.Center
`keyboard`	`boolean`	—	若为 true，按下 Escape 键时模态框将关闭。默认值：true
`closeOnNavigation`	`boolean`	—	若为 true，当用户在浏览器历史中后退时（history.back()、浏览器后退按钮），模态框将关闭。默认值：true
`size`	`"sm" \| "lg" \| "xl" \| string`	—	模态框窗口的尺寸
`windowClass`	`string`	—	附加到模态框窗口的自定义类
`backdropClass`	`string`	—	附加到模态框背景遮罩的自定义类
`dismissSelector`	`string`	—	可触发模态框窗口关闭（dismiss）的元素的自定义选择器。默认值："[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	可触发模态框窗口关闭（close）的元素的自定义选择器。默认值："[data-close=\"modal\"]"
`headerSelector`	`string`	—	模态框窗口头部元素的自定义选择器
`footerSelector`	`string`	—	模态框窗口底部元素的自定义选择器
`data`	`any`	—	打开模态框窗口时需要传递的额外数据

输出

响应 modal 的行为——有 1 个事件可供你挂接逻辑。

名称	类型	描述
`dismiss`	`any`	当用户关闭（dismiss）模态框时由模态框窗口发出，例如按下 Escape、点击背景遮罩或激活内置关闭按钮。载荷为 dismiss 原因（ModalDismissReasons.ESC、ModalDismissReasons.BACKDROP_CLICK 或自定义值）。

方法

通过代码驱动 modal——其编程接口提供 17 个方法。

名称	签名	返回值	描述
`HubModal.open`	`open<C, R, D>(content: Type<C> \| TemplateRef<any> \| string, options?: HubModalOptions<D>): HubModalRef<C, R>`	`HubModalRef<C, R>`	使用给定内容（组件类型、TemplateRef 或字符串）和选项打开一个新的模态框窗口，并返回用于控制它的 HubModalRef。内容组件可以注入 HubActiveModal 和 HUB_MODAL_DATA 令牌，以便与模态框交互并读取数据载荷。
`HubModal.dismissAll`	`dismissAll(reason?: any): void`	—	以所提供的原因关闭（dismiss）当前显示的所有模态框窗口。
`HubModal.hasOpenModals`	`hasOpenModals(): boolean`	`boolean`	指示应用中当前是否存在任何打开的模态框窗口。
`HubModal.activeInstances`	`activeInstances: EventEmitter<HubModalRef[]>`	`EventEmitter<HubModalRef[]>`	事件发射器，每当有模态框被打开或移除时，发出当前打开的 HubModalRef 实例列表。
`HubModalRef.close`	`close(result?: R): void`	—	以可选的结果值关闭模态框。HubModalRef.result Promise 会以所提供的值 resolve。
`HubModalRef.dismiss`	`dismiss(reason?: any): void`	—	以可选的原因值关闭（dismiss）模态框。HubModalRef.result Promise 会以所提供的值 reject。若配置了 beforeDismiss 守卫，则会予以遵循。
`HubModalRef.update`	`update(options: HubModalUpdatableOptions): void`	—	更新已打开模态框的选项（aria 属性、centered、placement、fullscreen、backdropClass、size、variant、windowClass、modalDialogClass）。
`HubModalRef.componentInstance`	`componentInstance: C \| void`	`C \| void`	用作模态框内容的组件实例。当内容为 TemplateRef 或模态框已关闭时返回 undefined。
`HubModalRef.result`	`result: Promise<R>`	`Promise<R>`	一个 Promise：模态框关闭时以关闭结果 resolve，被关闭（dismiss）时以 dismiss 原因 reject。
`HubModalRef.closed`	`closed: Observable<R>`	`Observable<R>`	Observable，当模态框关闭时发出传给 close() 的结果。
`HubModalRef.dismissed`	`dismissed: Observable<any>`	`Observable<any>`	Observable，当模态框被关闭（dismiss）时发出 dismiss 原因——即传给 dismiss() 的值，或诸如点击背景遮罩、按下 Escape 之类的内部原因。
`HubModalRef.shown`	`shown: Observable<void>`	`Observable<void>`	Observable，在模态框完全可见且打开动画结束后发出并完成。
`HubModalRef.hidden`	`hidden: Observable<void>`	`Observable<void>`	Observable，在模态框窗口和背景遮罩均已隐藏、动画结束且其元素已从 DOM 中移除后发出并完成。
`HubActiveModal.close`	`close(result?: R): void`	—	关闭承载该内容组件的模态框，并以可选的结果值 resolve HubModalRef.result Promise。
`HubActiveModal.dismiss`	`dismiss(reason?: any): void`	—	关闭（dismiss）承载该内容组件的模态框，并以可选的原因值 reject HubModalRef.result Promise。
`HubActiveModal.update`	`update(options: HubModalUpdatableOptions): void`	—	从内容组件内部更新已打开模态框的选项。
`HubActiveModal.data`	`data: D`	`D`	通过 HubModalOptions.data 传入的类型化载荷。等同于注入 HUB_MODAL_DATA 令牌；未提供 data 选项时解析为 null。

模板

打造你自己的样式——1 个模板插槽让你可以投影自定义标记。

名称	描述	示例
`Modal Template`	可传递给 modal 服务的模板引用	`<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal content goes here </div> <div class="modal-footer"> <button class="btn btn-secondary" (click)="dismiss()">Cancel</button> <button class="btn btn-primary" (click)="close('result')">OK</button> </div> </ng-template>`