API 参考

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

输入

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

名称	类型	默认值	描述
`HubTranslationService`	`Service`	`-`	用于管理翻译的可注入服务。方法：getTranslation()、setTranslations()
`OverlayService`	`Service`	`-`	用于以编程方式创建和管理遮罩层的服务
`PopupService<T>`	`Service`	`-`	用于创建弹出元素的简化服务
`HubTooltipDirective`	`Directive`	`-`	指令（[hubTooltip]），在悬停或聚焦时显示可定位、可主题化的提示框。输入：hubTooltip（文本）、hubTooltipPlacement、hubTooltipDelay、hubTooltipOffset。带前缀的名称使其可以与声明了自身 placement 的指令（如 [hubDropdown]）共存于同一元素。

输出

响应 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 值

模板

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

名称	描述	示例
`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`
`hubAnchorToViewport`	把一个盒子按首选的一侧贴在锚点旁；只有当该侧容不下、而对侧空间更大时才翻到对面，并在交叉轴上加以约束。	`hubAnchorToViewport({ anchor, box, viewport, side: 'block-start', offset: 8 }) → { x, y, side, flipped }`
`hubViewportOf`	通过元素自身的视图读取视口；没有视图时返回 `null`，例如服务端渲染。	`hubViewportOf(element) → { width, height } \| null`
`hubFitsInViewport`	把该尺寸的盒子放在该位置时，扣除边距后是否完全落在视口之内。	`hubFitsInViewport({ x, y }, { width, height }, viewport, 8) → boolean`
`hubClampToViewport`	把盒子拉回视口之内，且不多移一分；当盒子比窗口还大时，优先贴近的那条边。	`hubClampToViewport({ x, y }, { width, height }, viewport, 8) → { x, y }`
`hubOppositeSide`	锚点正对面的那一侧，对于放不下的一侧，这是唯一合理的退路。	`hubOppositeSide('inline-start') → 'inline-end'`
`hubToAnchorSide / hubToPhysicalSide`	把物理边经逻辑轴往返转换一次，好让以 `top` / `bottom` / `left` / `right` 书写的对外 API 在从右至左的方向下仍保持原意，而翻转只需推理一遍。	`hubToAnchorSide('left', true) → 'inline-end'; hubToPhysicalSide('inline-end', true) → 'left'`
`HubAnchorOptions / HubAnchoredPosition`	求解器接收与返回的类型；全是纯数字，因此这些算术无需排版引擎即可测试。	`HubAnchorRect · HubAnchorSide · HubPhysicalSide · HubAnchorAlign · HubViewportSize · HubBoxSize · HubPoint`