Angular Toast 通知服务 | ng-hub-ui-toast
standalone 的 Angular toast 通知服务,支持 Signals、生命周期 observables、进度条、六个位置以及完整的 CSS 变量主题化。
API 参考
这里是 toast 的完整契约:你可以绑定、监听、投影和设置主题的一切,都集中在一处。接入你需要的部分,自定义你想要的样式——它是 standalone 的,且对 signal 友好。
输入
通过 10 个输入项精细调校 toast。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
data (hub-toast)必填 | HubToastData | — | 要渲染的 toast:id、类型、消息、可选标题、解析后的配置以及生命周期 Subject。由 ToastContainerComponent 在内部提供——通常你永远不需要自己绑定它。 |
timeOut / extendedTimeOut (config) | number | 5000 / 2500 | timeOut 是自动关闭前的持续时间(毫秒,0 = 常驻);extendedTimeOut 是用户停止悬停 toast 后额外给予的时间。 |
closeButton / progressBar (config) | boolean | true / false | closeButton 在 toast 上显示一个关闭按钮;progressBar 显示一个倒计时进度条,指示距自动关闭还有多久。 |
tapToDismiss (config) | boolean | true | 当用户点击 toast 上的任意位置时将其关闭。 |
disableTimeOut (config) | boolean | 'timeOut' | 'extendedTimeOut' | false | 禁用自动关闭:true 或 'timeOut' 禁用初始计时器;'extendedTimeOut' 仅禁用悬停延长时间。 |
newestOnTop (config) | boolean | true | 为 true 时,最新的 toast 插入到堆栈顶部而不是底部。 |
positionClass (config) | HubToastPosition | string | 'toast-top-right' | toast 容器在屏幕上的位置:六个内置 toast-top/bottom-left/center/right 类之一,或自定义类字符串。 |
maxOpened (config) | number | 0 | 同时可见 toast 的最大数量;0 表示不限制。 |
autoDismiss (config) | boolean | false | 达到 maxOpened 时,自动移除最旧的 toast,为新 toast 腾出位置。 |
preventDuplicates (config) | boolean | false | 忽略消息和类型与已显示 toast 相同的新 toast,转而返回既有 toast 的句柄。 |
输出
响应 toast 的行为——有 1 个事件可供你挂接逻辑。
| 名称 | 类型 | 描述 |
|---|---|---|
closed (hub-toast) | EventEmitter<number> | 当 toast 应被关闭时发出其 id——在自动关闭计时器结束、启用 tapToDismiss 时被点按,或按下关闭按钮之后。 |
方法
通过代码驱动 toast——其编程接口提供 7 个方法。
| 名称 | 签名 | 返回值 | 描述 |
|---|---|---|---|
ToastService.success | success(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | 显示一个成功 toast,带有给定消息、可选标题和按调用生效的配置覆盖。 |
ToastService.error | error(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | 显示一个错误 toast,带有给定消息、可选标题和按调用生效的配置覆盖。 |
ToastService.warning | warning(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | 显示一个警告 toast,带有给定消息、可选标题和按调用生效的配置覆盖。 |
ToastService.info | info(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | 显示一个信息 toast,带有给定消息、可选标题和按调用生效的配置覆盖。 |
ToastService.show | show(message: string, title?: string, config?: Partial<HubToastConfig>, type?: HubToastType | string): HubToastRef | HubToastRef handle for the created toast | 以内置或自定义类型字符串显示一个 toast;该类型会作为 data-type 应用到 toast 宿主上,并驱动强调色样式。 |
ToastService.remove | remove(toastId: number): void | void | 按 show 系列方法返回的 id 移除特定的 toast。 |
ToastService.clear | clear(): void | void | 立即移除所有活动的 toast,并完成每个 toast 的 onHidden Observable。 |
模板
尚未记录任何模板。