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)number5000 / 2500timeOut 是自动关闭前的持续时间(毫秒,0 = 常驻);extendedTimeOut 是用户停止悬停 toast 后额外给予的时间。
closeButton / progressBar (config)booleantrue / falsecloseButton 在 toast 上显示一个关闭按钮;progressBar 显示一个倒计时进度条,指示距自动关闭还有多久。
tapToDismiss (config)booleantrue当用户点击 toast 上的任意位置时将其关闭。
disableTimeOut (config)boolean | 'timeOut' | 'extendedTimeOut'false禁用自动关闭:true 或 'timeOut' 禁用初始计时器;'extendedTimeOut' 仅禁用悬停延长时间。
newestOnTop (config)booleantrue为 true 时,最新的 toast 插入到堆栈顶部而不是底部。
positionClass (config)HubToastPosition | string'toast-top-right'toast 容器在屏幕上的位置:六个内置 toast-top/bottom-left/center/right 类之一,或自定义类字符串。
maxOpened (config)number0同时可见 toast 的最大数量;0 表示不限制。
autoDismiss (config)booleanfalse达到 maxOpened 时,自动移除最旧的 toast,为新 toast 腾出位置。
preventDuplicates (config)booleanfalse忽略消息和类型与已显示 toast 相同的新 toast,转而返回既有 toast 的句柄。

输出

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

名称类型描述
closed (hub-toast)EventEmitter<number>当 toast 应被关闭时发出其 id——在自动关闭计时器结束、启用 tapToDismiss 时被点按,或按下关闭按钮之后。

方法

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

名称签名返回值描述
ToastService.successsuccess(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the created toast显示一个成功 toast,带有给定消息、可选标题和按调用生效的配置覆盖。
ToastService.errorerror(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the created toast显示一个错误 toast,带有给定消息、可选标题和按调用生效的配置覆盖。
ToastService.warningwarning(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the created toast显示一个警告 toast,带有给定消息、可选标题和按调用生效的配置覆盖。
ToastService.infoinfo(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the created toast显示一个信息 toast,带有给定消息、可选标题和按调用生效的配置覆盖。
ToastService.showshow(message: string, title?: string, config?: Partial<HubToastConfig>, type?: HubToastType | string): HubToastRefHubToastRef handle for the created toast以内置或自定义类型字符串显示一个 toast;该类型会作为 data-type 应用到 toast 宿主上,并驱动强调色样式。
ToastService.removeremove(toastId: number): voidvoid按 show 系列方法返回的 id 移除特定的 toast。
ToastService.clearclear(): voidvoid立即移除所有活动的 toast,并完成每个 toast 的 onHidden Observable。

模板

尚未记录任何模板。