ng-notyf 是一个基于 Angular 的通知组件，能够自定义通知样式、持续时间和位置。ng-notyf 的使用相对简单，本文将会详细介绍如何安装、引入和使用 ng-notyf。
安装
使用 npm 安装 ng-notyf：
--- ------- -------- ------
引入
在 app.module.ts 中引入 ng-notyf：
------ - ----------- - ---- ----------- ----------- ------------- --------------- -------- --------------- ------------- ---------- --- ---------- -------------- -- ------ ----- --------- --
在 app.component.ts 中注入 NotyfService：
------ - ------------ - ---- ----------- ------------------- ------ ------------- --
使用
使用 NotyfService 发送通知：
----------------- ----- ---------- -------- -------- --------- ---- ---
属性
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 中添加按钮：
------- -----------------------------------
在 app.component.ts 中添加方法：
----------- -
-----------------
----- ----------
-------- ---------
--------- ----
---
-总结
通过本文的介绍，我们初步了解了如何安装、引入和使用 ng-notyf。如果想要定制更多的样式配置，可以通过全局配置来实现。ng-notyf 的使用相对简单，但是它却极大地提高了用户体验的良好度。希望本文对你在开发过程中有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ab281e8991b448d848f