Angular Toast 通知服务 | ng-hub-ui-toast
standalone 的 Angular toast 通知服务，支持 Signals、生命周期 observables、进度条、六个位置以及完整的 CSS 变量主题化。
概览
团队为何搜索这个库
当你需要一个零配置的命令式通知层，既能与 Angular 的 standalone 架构共存，又能开箱即用地提供基于 Observable 的生命周期钩子时，请使用 ng-hub-ui-toast。
安装
npm install ng-hub-ui-toast跳转到
适用于
- 表单提交反馈
- 后台同步通知
- 错误警报
- 会话过期警告
关于 toast
ng-hub-ui-toast 是一个面向 Angular 22+ standalone 应用的、由 signal 驱动的 toast 服务。可从任意组件或服务中调用 success()、error()、warning() 或 info()；overlay 容器会在首次触发通知时延迟挂载。每次调用都会返回一个带有 onShown、onHidden 和 onTap observables 以及 manualClose() / resetTimeout() 方法的 HubToastRef。可通过 provideToast() 全局配置默认值，并按调用覆盖任意选项。
功能指南
基本 toast 类型
四种语义类型 —— success、error、warning 和 info —— 每一种都映射到对应的设计系统颜色令牌。
示例:
基本类型
基本类型
配置选项
可按调用或通过 provideToast() 全局控制 auto-dismiss 超时、进度条、关闭按钮以及 tap-to-dismiss 行为。
示例:
配置选项
配置选项
定位
屏幕上的六个固定位置：top/bottom 与 right、left 或 center 组合。
示例:
定位
定位
去重
preventDuplicates 会静默丢弃与已显示消息和类型相匹配的新通知。
示例:
防止重复
防止重复
Click the button multiple times. With preventDuplicates enabled, only one toast with the same message will appear.
容量控制
maxOpened 限制可见堆栈的数量；autoDismiss 决定在达到上限时是移除最旧的 toast 还是静默丢弃新的。
示例:
最大打开数与 autoDismiss
最大打开数与 autoDismiss
When autoDismiss is false, new toasts are silently dropped once the cap is reached. When true, the oldest toast is removed to make room.
生命周期 observables
每个 HubToastRef 都暴露 onShown、onHidden 和 onTap observables，以及用于命令式控制的 manualClose() 和 resetTimeout()。
示例:
生命周期 observables
生命周期 observables
CSS 变量主题化
每一处视觉细节 —— 背景、圆角、阴影、内边距、进度条 —— 都是一个 --hub-toast-* 自定义属性，可从任意祖先元素或样式表中覆盖。
示例:
CSS 变量主题化
CSS 变量主题化
Active token overrides (applied to this demo's container):
--hub-toast-border-radius: 0.75rem;
--hub-toast-shadow: 0 4px 20px rgba(0,0,0,.18);
--hub-toast-padding-x: 1.25rem;
--hub-toast-padding-y: 1rem;
--hub-toast-font-size: 0.9rem; Tokens are injected from the page's stylesheet or from a style binding on any ancestor element — the container reads them via CSS inheritance.
核心特性
最近更改
Version 22.1.0 - 6/19/26, 12:00 AM
changed: Lowered the Angular peer dependency floor to `>=21.0.0`; the library now installs and runs in Angular 21 applications. No source or API changes.
Version 22.0.0 - 6/17/26, 12:00 AM
added: Initial release: `ToastService` with `success()`, `error()`, `warning()`, `info()`, `show()`, `remove()`, `clear()`.
added: `HubToastRef` with `onShown`, `onHidden`, `onTap` observables and `manualClose()` / `resetTimeout()`.
added: `ToastComponent` with signal-based auto-dismiss timer, progress bar and close button.
added: `ToastContainerComponent` with six position classes.
added: Accent system: `@each` loop for built-in types; `color-mix` open default for custom types.
added: `provideToast()` standalone provider function.
added: Angular animations: slide-in from edge on enter, fade-out on dismiss.