Angular 工具库 | ng-hub-ui-utils
Angular 工具库,包含 pipes、焦点管理、overlay、过渡和翻译助手,供可复用 UI 组件共享使用。
API 参考
这里是 utils 的完整契约:你可以绑定、监听、投影和设置主题的一切,都集中在一处。接入你需要的部分,自定义你想要的样式——它是 standalone 的,且对 signal 友好。
输入
通过 5 个输入项精细调校 utils。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
HubTranslationService | Service | - | 用于管理翻译的可注入服务。方法:getTranslation()、setTranslations() |
HubOverlayService | Service | - | 用于以编程方式创建和管理遮罩层的服务 |
HubPopupService | Service | - | 用于创建弹出元素的简化服务 |
HubTooltipDirective | Directive | - | 指令([hubTooltip]),在悬停或聚焦时显示可定位、可主题化的提示框。输入:hubTooltip(文本)、hubTooltipPlacement、hubTooltipDelay、hubTooltipOffset。带前缀的名称使其可以与声明了自身 placement 的指令(如 [hubDropdown])共存于同一元素。 |
TooltipDirective (deprecated) | Directive | - | 已弃用,请改用 [hubTooltip]。其无前缀的输入(tooltip、placement、delay、offset)会被同一元素上声明相同名称的任何其他指令或组件抢占。行为保持不变;迁移时逐个属性替换即可。 |
输出
响应 utils 的行为——有 7 个事件可供你挂接逻辑。
| 名称 | 类型 | 描述 |
|---|---|---|
TranslatePipe | Pipe | 使用 HubTranslationService 翻译某个键。用法:{{ "key" | translate }} |
GetPipe | Pipe | 获取嵌套属性值。用法:{{ object | get:"path.to.property" }} |
IsStringPipe | Pipe | 检查值是否为字符串。用法:{{ value | isString }} |
IsObjectPipe | Pipe | 检查值是否为对象。用法:{{ value | isObject }} |
IsObservablePipe | Pipe | 检查值是否为 Observable。用法:{{ value | isObservable }} |
UcfirstPipe | Pipe | 将首字母大写。用法:{{ "hello" | ucfirst }} → "Hello" |
UnwrapAsyncPipe | Pipe | 在模板中解包 Observable 或 Promise 值 |
模板
打造你自己的样式——4 个模板插槽让你可以投影自定义标记。
| 名称 | 描述 | 示例 |
|---|---|---|
hubFocusTrap() | 将键盘焦点限制在某个元素内。适用于模态框和对话框。 | hubFocusTrap(zone, element, stopFocusTrap$, refocusOnClick) |
interpolateString() | 用对象中的值替换 {{ placeholders }} 占位符 | interpolateString("Hello {{name}}", { name: "World" }) → "Hello World" |
getValue() | 使用点分表示法获取嵌套属性 | getValue(obj, "user.profile.name") |
equals() | 对对象和数组进行深度相等比较 | equals({ a: 1 }, { a: 1 }) → true |