API 参考

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

输入

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

名称	类型	默认值	描述
`animation`	`boolean`	—	若为 true，portal 的打开和关闭将带有动画。默认值：true
`ariaLabelledBy`	`string`	—	要设置在 portal 窗口上的 `aria-labelledby` 属性值
`ariaDescribedBy`	`string`	—	要设置在 portal 窗口上的 `aria-describedby` 属性值
`beforeDismiss`	`() => boolean \| Promise<boolean>`	—	在 portal 即将关闭（dismiss）之前调用的回调。返回 false 可阻止关闭。
`container`	`string \| HTMLElement`	—	指定所有新 portal 窗口应附加到的元素的选择器。若未指定，则为 `body`。
`injector`	`Injector`	—	用于 portal 内容的 `Injector`，以启用依赖注入。
`keyboard`	`boolean`	—	若为 true，按下 Escape 键时 portal 将关闭。默认值：true
`scrollable`	`boolean`	—	可滚动的 portal 内容（默认值为 false）。
`windowClass`	`string`	—	附加到 portal 窗口的自定义类，用于自定义样式和定位。
`portalDialogClass`	`string`	—	附加到 portal 对话框容器的自定义类。
`portalContentClass`	`string`	—	附加到 portal 内容包装器的自定义类。
`headerSelector`	`string`	—	portal 窗口头部元素的自定义选择器。适用于定位特定的 portal 区域。
`footerSelector`	`string`	—	portal 窗口底部元素的自定义选择器。适用于定位特定的 portal 区域。
`dismissSelector`	`string`	—	可触发 portal 窗口关闭（dismiss）的元素的自定义选择器。默认值：`[data-dismiss="portal"]`
`closeSelector`	`string`	—	可触发 portal 窗口关闭（close）的元素的自定义选择器。默认值：`[data-close="portal"]`

输出

尚未记录任何输出项。

方法

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

名称	签名	返回值	描述
`HubPortal.open`	`open(content: any, options?: HubPortalOptions): HubPortalRef`	`HubPortalRef`	使用指定内容（组件类型、TemplateRef 或字符串）和选项打开一个新的 portal 窗口，并返回用于控制它的 HubPortalRef。内容组件可以注入 HubActivePortal，以便从内部关闭（close）或消除（dismiss）该 portal。
`HubPortal.toggle`	`toggle(content: any, options?: HubPortalOptions): HubPortalRef`	`HubPortalRef`	以 'toggle' 为原因消除（dismiss）当前打开的所有 portal，等待它们完全隐藏，然后以给定的内容和选项显示一个新的 portal。返回新 portal 的引用。
`HubPortal.dismissAll`	`dismissAll(reason?: any): void`	—	以所提供的原因消除（dismiss）当前显示的所有 portal 窗口。
`HubPortal.hasOpenPortals`	`hasOpenPortals(): boolean`	`boolean`	指示应用中当前是否存在任何打开的 portal 窗口。
`HubPortal.activeInstances`	`activeInstances: EventEmitter<HubPortalRef[]>`	`EventEmitter<HubPortalRef[]>`	事件发射器，每当有 portal 被打开或移除时，发出当前打开的 HubPortalRef 实例列表。

模板

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

名称	描述	示例
`Portal Template`	可传递给 HubPortal 服务用于动态渲染的模板引用	`<ng-template #portalTemplate> <div class="portal-content"> <div class="portal-header"> <h4>Portal Title</h4> <button data-dismiss="portal">×</button> </div> <div class="portal-body"> Portal content goes here </div> <div class="portal-footer"> <button data-dismiss="portal">Cancel</button> <button data-close="portal">OK</button> </div> </div> </ng-template> <!-- Open the portal --> <button (click)="portal.open(portalTemplate)">Open Portal</button>`