ng-notyf 是一个基于 Angular 的通知组件，能够自定义通知样式、持续时间和位置。ng-notyf 的使用相对简单，本文将会详细介绍如何安装、引入和使用 ng-notyf。
安装
使用 npm 安装 ng-notyf：
npm install ng-notyf --save
引入
在 app.module.ts 中引入 ng-notyf：
-- -------------------- ---- ------- ------ - ----------- - ---- ----------- ----------- ------------- --------------- -------- --------------- ------------- ---------- --- ---------- -------------- -- ------ ----- --------- --
在 app.component.ts 中注入 NotyfService：
import { NotyfService } from 'ng-notyf';
constructor(private notyf: NotyfService) {}使用
使用 NotyfService 发送通知：
this.notyf.open({
type: 'success',
message: '操作成功！',
duration: 5000
});属性
type（string）：通知类型，可选值包括 success、error、warning、info、secondary、purple、pink、deep-purple、deep-pink、indigo、blue、light-blue、cyan、teal、green、light-green、lime、yellow、amber、orange、deep-orange。message（string）：通知文本。duration（number）：持续时间，单位为毫秒。
全局配置
在 app.component.ts 中添加 ng-notyf 全局配置：
-- -------------------- ---- -------
------------------- ------ ------------- -
-----------------
--------- -----
--------- -
-- ---------
-- -----
--
------ -
-
----- ----------
--------- -
----- ------
------- -----
---------- ---------------
-
--
-
----- --------
--------- -
----- ------
------- -----
---------- -------------
-
--
-
----- ----------
--------- -
----- ------
------- -----
---------- ---------------
-
--
-
----- -------
--------- -
----- ------
------- -----
---------- ------------
-
-
-
---
-示例代码
在 app.component.html 中添加按钮：
<button (click)="showToast()">显示通知</button>
在 app.component.ts 中添加方法：
showToast() {
this.notyf.open({
type: 'warning',
message: '这是一条警告',
duration: 3000
});
}总结
通过本文的介绍，我们初步了解了如何安装、引入和使用 ng-notyf。如果想要定制更多的样式配置，可以通过全局配置来实现。ng-notyf 的使用相对简单，但是它却极大地提高了用户体验的良好度。希望本文对你在开发过程中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab281e8991b448d848f