Angular 工具库 | ng-hub-ui-utils

Angular 工具库,包含 pipes、焦点管理、overlay、过渡和翻译助手,供可复用 UI 组件共享使用。

API 参考

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

输入

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

名称类型默认值描述
HubTranslationServiceService-用于管理翻译的可注入服务。方法:getTranslation()、setTranslations()
HubOverlayServiceService-用于以编程方式创建和管理遮罩层的服务
HubPopupServiceService-用于创建弹出元素的简化服务
HubTooltipDirectiveDirective-指令([hubTooltip]),在悬停或聚焦时显示可定位、可主题化的提示框。输入:hubTooltip(文本)、hubTooltipPlacement、hubTooltipDelay、hubTooltipOffset。带前缀的名称使其可以与声明了自身 placement 的指令(如 [hubDropdown])共存于同一元素。
TooltipDirective (deprecated)Directive-已弃用,请改用 [hubTooltip]。其无前缀的输入(tooltip、placement、delay、offset)会被同一元素上声明相同名称的任何其他指令或组件抢占。行为保持不变;迁移时逐个属性替换即可。

输出

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

名称类型描述
TranslatePipePipe使用 HubTranslationService 翻译某个键。用法:{{ "key" | translate }}
GetPipePipe获取嵌套属性值。用法:{{ object | get:"path.to.property" }}
IsStringPipePipe检查值是否为字符串。用法:{{ value | isString }}
IsObjectPipePipe检查值是否为对象。用法:{{ value | isObject }}
IsObservablePipePipe检查值是否为 Observable。用法:{{ value | isObservable }}
UcfirstPipePipe将首字母大写。用法:{{ "hello" | ucfirst }} → "Hello"
UnwrapAsyncPipePipe在模板中解包 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