Angular Toast 通知服务 | ng-hub-ui-toast

standalone 的 Angular toast 通知服务,支持 Signals、生命周期 observables、进度条、六个位置以及完整的 CSS 变量主题化。

API 参考

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

输入

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

名称类型默认值描述
data (hub-toast)必填HubToastData—要渲染的 toast:id、类型、消息、可选标题、解析后的配置以及生命周期 Subject。由 ToastContainerComponent 在内部提供——通常你永远不需要自己绑定它。
position (hub-toast-container)HubToastPosition | string'toast-top-right'该容器负责的屏幕角落。它只渲染 positionClass 与之匹配的提示,因此新通知不会移动已经显示的提示。ToastService 在挂载容器时设置该值。
timeOut / extendedTimeOut (config)number5000 / 2500timeOut 是自动关闭前的持续时间(毫秒,0 = 常驻);extendedTimeOut 是用户停止悬停 toast 后额外给予的时间。
closeButton / progressBar (config)booleantrue / falsecloseButton 在 toast 上显示一个关闭按钮;progressBar 显示一个倒计时进度条,指示距自动关闭还有多久。
closeButtonAriaLabel (config)string'Close'关闭按钮朗读出的无障碍名称。× 字形仅作装饰,因此这是屏幕阅读器唯一可用的名称;在非英语应用中请翻译它。
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-top/bottom-left/center/right 之一,或自定义类名。每个位置都有各自的容器。
maxOpened (config)number0同时可见提示的最大数量,按所有位置合计而非逐个角落计算;0 表示不限。
autoDismiss (config)booleanfalse达到 maxOpened 时自动移除屏幕上最旧的提示以腾出位置;由于上限是全局的,被移除的可能位于另一个角落。关闭时,该调用会被丢弃,其 HubToastRef 会报告 dropped: true。
preventDuplicates (config)booleanfalse忽略消息和类型与已显示 toast 相同的新 toast,转而返回既有 toast 的句柄。

输出

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

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

方法

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

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

模板

尚未记录任何模板。