# @aminekun90/ngx-toast 中文文档
规范地址：https://npmcn.com/package/%40aminekun90/ngx-toast/
版本：1\.3\.0
npm 元数据更新时间：2026-10-20T17:10:10.693Z
中文译文更新时间：2026-11-06T00:32:30.681Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40aminekun90/ngx-toast
原文对照：https://npmcn.com/package/%40aminekun90/ngx-toast/?lang=original
项目主页：https://github.com/aminekun90/ngx-toast#readme
源码仓库：https://github.com/aminekun90/ngx-toast
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：831 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=24\.13\.0
- 运行依赖：1 个
- peer 依赖：@angular/core ^21\.2\.0 \|\| ^22\.0\.0，@angular/common ^21\.2\.0 \|\| ^22\.0\.0，@fortawesome/angular-fontawesome ^4\.0\.0 \|\| ^5\.0\.0，@fortawesome/fontawesome-svg-core ^7\.0\.0，@fortawesome/free-solid-svg-icons ^7\.0\.0
- 首次发布：2026-03-04T09:44:58.241Z
- 最新版本发布：2026-10-20T17:10:10.331Z
- 近 30 天下载量：77588（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 16 个）
## 中文简介
轻而易举的高性能 **无区准备** 用于Angular 20+的土司通知库.
## 安装
```sh
npm install @aminekun90/ngx-toast
```
也可以使用：`pnpm add @aminekun90/ngx-toast`、`yarn add @aminekun90/ngx-toast`、`bun add @aminekun90/ngx-toast`
## README
# ngx-toast (英语)
轻而易举的高性能 **无区准备** 用于Angular 20+的土司通知库.
[](https://angular.dev/) [](https://github.com/aminekun90/ngx-toast/graphs/commit-activity) [](https://github.com/aminekun90/ngx-toast/releases) [](https://github.com/aminekun90/ngx-toast/actions) [](https://github.com/aminekun90/ngx-toast/blob/main/LICENSE)  [](https://socket.dev/npm/package/@aminekun90/ngx-toast) [](https://www.npmjs.com/package/@aminekun90/ngx-toast)
## Demo 应用程序和使用
[查看演示](https://aminekun90.github.io/ngx-toast/)
## 关键特性
- ⚡ **角 20+ 优化**: 完全支持 `provideZonelessChangeDetection()`。 。 。 .
- 📡 **基于信号**:以Angular Signals所建,用于反应和高效的状态管理.
- 🎨 **FontAsome 整合**:内建支持专业偶像画.
- 🛠 **可自定义**:对持续时间,进度栏,和屏幕位置进行简单控制.
- ♿ **可访问**数字 : `role="alert"`, (中文(简体) ), `aria-live`,键盘解析(Enter/Space/Escape)和焦点样式出框.
- ⏸️ **暂停悬浮**: 土司被徘徊或被聚焦时,自动解除计时器和进度栏暂停.
- 🌙 **深色模式( B)**: 通过 CSS 变量重排一切; 自动 `prefers-color-scheme` 支持加选入 `.ngx-toast-dark` 课.
- 🧩 **全局默认值**: 配置位置、 持续时间、 最大堆栈、 拆卸等 `provideToast()`。 。 。 .
- 🔁 **承诺加载土司( L)**: 一等舱 `loading()` 财务报告和审定财务报表 `promise()` 帮助交换位置.
- 🪶 **零运行时间**:没有RxJS——纯粹由信号驱动.
* * *
## 安装
通过 **雅伦**数字 :
```bash
yarn add ngx-toast
```
## 同伴依赖关系
由于该库的视觉组件使用FontAwesome, 请确保您在项目中安装以下组件 :
```bash
yarn add @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
```
* * *
## 配置
在您的 app. config. ts (或 config. ts) 中添加必要的提供者 。 强烈建议使用提供动画Async()进行平稳过渡.
```ts
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
export const appConfig: ApplicationConfig = {
providers: [
provideAnimationsAsync(),
{
provide: 'INITIALIZE_FA',
useFactory: (library: FaIconLibrary) => library.addIconPacks(fas),
deps: [FaIconLibrary]
}
]
};
```
* * *
## 使用量
### 1\. 增加全球集装箱
将 ngx-toast- 容器放入您的根组件( app. ts 或 app. community.html) 。 这个容器将处理所有活性土司的堆放和定位.
```ts
import { ToastContainerComponent } from 'ngx-toast';
@Component({
selector: 'app-root',
standalone: true,
imports: [ToastContainerComponent],
template: `
`
})
export class App {}
```
### 2\. 触发通知
```ts
import { Component, inject } from '@angular/core';
import { ToastService } from 'ngx-toast';
@Component({ ... })
export class MyComponent {
private toastService = inject(ToastService);
showSuccess() {
this.toastService.show({
type: 'success',
title: 'Success!',
message: 'The operation was completed successfully.',
duration: 3000,
progressBar: true,
position: 'bottom-right'
});
}
}
```
### 3\. 全球默认(可选)
设置全应用程序默认值 `provideToast()`。任何值仍然可以推翻每个呼叫.
```ts
import { provideToast } from 'ngx-toast';
export const appConfig: ApplicationConfig = {
providers: [
provideToast({
position: 'top-right',
duration: 4000,
pauseOnHover: true,
maxToasts: 5,
preventDuplicates: true,
newestOnTop: true,
}),
],
};
```
### 4\. 装入并许诺吐司
```ts
const id = this.toastService.loading('Uploading…');
// later: this.toastService.success('Done!', undefined, { id });
await this.toastService.promise(saveUser(), {
loading: 'Saving…',
success: (user) => `Saved ${user.name}`,
error: (err) => `Failed: ${err}`,
});
```
## 服务方法
| 方法 | 回返 | 说明 |
| --- | --- | --- |
| `show(config)` | `number` | 显示祝酒词; 返回其ID 。 重用一个 `id` 更新了烤面包. |
| `success/error/warning/info(message, title?, config?)` | `number` | 已键入快捷键 . |
| `loading(message, title?, config?)` | `number` | 持续加载土司(无自动解职). |
| `promise(promise, msgs, config?)` | `Promise` | 显示装入, 然后转换成成功/ 错误 . |
| `remove(id)` | `void` | 解除一道祝词(含出道动画). |
| `clear(position?)` | `void` | 解散所有吐司,可选择按位置过滤. |
| `pause(id)` 编号 : `resume(id)` | `void` | 手动暂停/恢复自动放行计时器 . |
## 配置引用
| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 类型 | “ 成功” qq“ 错误” “ 警告” qq“ info” ” 正在装入 ” | 输入“ info” | 视觉主题和默认图标. |
| 标题 | 字符串 | 未定义 | 可选的粗体标题在信息上方. |
| 消息 | 字符串 | —— 说 | 主要文本内容. |
| 会期 | 编号 | 5000块 | 自动关闭前的 ms (`0` = 持续). |
| 职位 | 敬酒提议 | "从下到上" | 6个角/中心之一. |
| 进度栏 | 布尔 | 虚假 | 显示可视倒计时栏 . |
| 进步动画 | “ 增加 ” “ 减少 ” | "不断" | 进步栏填充方向. |
| 图标 | \[IconPrefix, 图标名\] | 按类型 | 自定义 FontAweome 图标 . |
| 土豆类 | 字符串 | '' | 土司外加CSS课. |
| 暂停 | 布尔 | 真实 | 悬浮/焦点暂停计时器/进度 . |
| 主题 | 字符串 | 未定义 | 内建主题 (C)`material` | `glass` | `minimal` | `neon` | `solid`)或自来自来. |
### 仅限全局选项( E)`provideToast`(中文(简体) )
| 财产 | 默认 | 说明 |
| --- | --- | --- |
| 最大建议 | 0 个 | 最大同时敬酒`0` = 无限). |
| 防止重复 | 虚假 | 刷新一个相同的祝酒,而不是堆叠. |
| 最新主题 | 虚假 | 在堆栈上方插入新的土司. |
## 他们
五个内置主题—— `material`, (中文(简体) ), `glass`, (中文(简体) ), `minimal`, (中文(简体) ), `neon`, (中文(简体) ), `solid` 适用 每个土司或全球:
```ts
this.toastService.success('Saved!', undefined, { theme: 'glass' });
```
```html
…
```
一切都是CSS可变驱动的,所以你可以完全重塑或定义自己的 主题。 覆盖任何地方的标志, 或者切换暗模式 `.ngx-toast-dark`数字 :
```css
:root {
--ngx-toast-radius: 12px;
--ngx-toast-width: 380px;
--ngx-toast-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
```
\* 全文参考: [文件/主题.md](https://github.com/aminekun90/ngx-toast/blob/main/docs/THEMING.md) • 妇女 🏗️ [文献/档案](https://github.com/aminekun90/ngx-toast/blob/main/docs/ARCHITECTURE.md)
## 兼容性
| ngx-toast (英语) | 角质版本 | 节点.js 版本 | 更改检测 |
| --- | --- | --- | --- |
| 1.3.x (单位:千美元) | ^21.2.0 |22 | ^22.x ^24.x | 无区和区.js |
| 1.2.x (单位:千美元) | ^21.2.0 |22 | ^22.x ^24.x | 无区和区.js |
| 1.0.x (中文(简体) ) | ^21.2.0 (韩语) | ^22.x ^24.x | 无区和区.js |
这座图书馆由Angular 21及以上建筑. 节点需要24.13.0或更高.
## 保留此工程: coffee:
我花时间和精力来写和维持这个图书馆 如果它能帮助你并节省你的时间 请考虑捐赠!
谢谢你的支持.
[通过 PayPal 捐款](https://npmcn.com/package/%40aminekun90/ngx-toast/paypal.me/aminebouzahar)
[](https://www.paypal.com/paypalme/aminebouzahar)
## 许可证
麻省理工学院执照,由Amine Bouzahar执导.
## 常见问题
### @aminekun90/ngx-toast 是什么？
轻而易举的高性能 无区准备 用于Angular 20\+的土司通知库\.
### 如何安装 @aminekun90/ngx-toast？
在项目目录运行 npm install @aminekun90/ngx-toast，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^21\.2\.0 \|\| ^22\.0\.0）、@angular/common（^21\.2\.0 \|\| ^22\.0\.0）、@fortawesome/angular-fontawesome（^4\.0\.0 \|\| ^5\.0\.0）、@fortawesome/fontawesome-svg-core（^7\.0\.0）、@fortawesome/free-solid-svg-icons（^7\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @aminekun90/ngx-toast 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @aminekun90/ngx-toast 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @aminekun90/ngx-toast 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js \>=24\.13\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @aminekun90/ngx-toast 可以商用吗？
@aminekun90/ngx-toast 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @aminekun90/ngx-toast 的下载量有多少？
根据 npm 官方下载统计，@aminekun90/ngx-toast 在 2026/10/06 – 2026/11/04 这 30 天内被下载 77,588 次，日均约 2,586 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @aminekun90/ngx-toast 还在维护吗？
最新版本 1\.3\.0 发布于 2026/10/21（16 天前）；至今共发布 16 个版本，其中过去 12 个月发布了 16 个；首次发布于 2026/03/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。