一、介绍
angular5-toaster 是一个 Angular 的通知插件，可以用于显示各种类型的通知，例如警告、错误、成功等。它基于 Angular 5 开发，使用简单，功能强大，是一款不错的通知插件。
二、安装
使用 angular5-toaster 可以通过 npm 来进行安装。在命令行中输入以下命令：
npm install angular5-toaster --save
该命令将 angular5-toaster 安装到您的项目中，并将其添加到 package.json 文件中的依赖部分。
三、使用
在使用 angular5-toaster 之前，您需要将它添加到您的模块中。在你的模块中添加以下代码：
import { ToasterModule } from 'angular5-toaster';
@NgModule({
imports: [BrowserModule, ToasterModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }在组件中使用 angular5-toaster 只需要引入它并将其注入到构造函数中：
-- -------------------- ---- -------
------ - --------------- ------------- - ---- -------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------- --------------- ---------------
------ -------------- ------------- - --- ---------------
-------------- ------------------
---------- ------
---
--------------------------- --------------- -
------------------- - ---------------
-
------ --------------- ------- ------ ------- -------- ------- -
----------------------------- ------ ---------
-
-四、参数
在使用 angular5-toaster 时，您可以传递不同的参数来控制通知的位置、样式、持续时间等。以下是一些可配置的参数：
- animation：指定动画类型
- tapToDismiss：指定是否允许点击通知来取消它
- timeout：指定通知消失的时间（毫秒）
- positionClass：指定通知的位置
- toastContainerId：指定通知的容器 ID
- toastsLimit：指定最多可以显示的通知数量
- mouseoverTimerStop：指定鼠标悬停时是否停止计时器
- preventDuplicates：指定是否禁止重复通知
五、示例
以下是一个示例，用于演示如何在 Angular 中使用 angular5-toaster。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- ------------- - ---- -------------------
------------
--------- -----------
--------- -
---- ------------------
------------ ------- ------------
------- -------------------------- ------- ------- ----- -- - ------ ---------------- ---- --------------
------- ----------------------------- ------- ------- ----- -- - ------ ---------------- ------- --------------
------- ----------------------------- ------- ------- ----- -- - ------ ---------------- ------- --------------
------- --------------------------- ------- ------- ----- -- - ------ ---------------- ----- --------------
------------------ ----------------------------------------------------
------
--
------- --
---------- -
------- -----
-
------ -
------------- -----
-
--
--
------ ----- ------------ -
------- --------------- ---------------
------ -------------- ------------- - --- ---------------
-------------- ------------------
---------- ------
---
--------------------------- --------------- -
------------------- - ---------------
-
------ --------------- ------- ------ ------- -------- ------- -
----------------------------- ------ ---------
-
-六、总结
angular5-toaster 是一个功能强大的 Angular 通知插件，它可以帮助您在应用程序中显示各种类型的通知。本文介绍了如何在 Angular 中使用 angular5-toaster，并提供了一些示例代码和可配置的参数。相信读者在阅读本文后，已经掌握了如何在 Angular 中使用 angular5-toaster。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672181e8991b448e38fb