在前端开发中，Toast 是一个非常重要的提示消息组件。在 Angular 开发中，有一款非常优秀的 Toast 组件是 ng2-Toast。本文将介绍如何通过 npm 安装和使用 ng2-Toast。
1. 安装
首先需要确保已经安装了 npm 包管理器，如果没有安装可以使用以下命令进行安装：
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - $ sudo apt-get install -y nodejs
然后就可以使用 npm 快捷安装 ng2-Toast 了：
$ npm install ng2-toast --save
2. 导入
在需要使用 Toast 的 Angular 模块中导入 ng2-Toast 模块：
import { ToastModule } from 'ng2-toast';
@NgModule({
imports: [
ToastModule.forRoot()
]
})
export class AppModule { }这里使用 forRoot() 方法是为了确保每个组件都能使用到 Toast。
3. 使用
在组件中使用 ToastService 来发送 Toast 消息：
-- -------------------- ---- -------
------ - ------------ - ---- ------------
------ ----- ------------ -
------------------- ------------- ------------- -
-
-------------- -
--------------------------------------
-
------------ -
----------------------------------
-
-------------- -
--------------------------------------
-
----------- -
--------------------------------
-
-4. 可配置项
ng2-Toast 提供了可选配置项来定制 Toast 样式和行为。
4.1 默认配置
接下来的配置项都是可选的，可以使用默认配置或者根据具体需求修改配置。
-- -------------------- ---- ------- ------ - ------------ - ---- ------------ ----- -------- ------------ - - -------- ----------- --------- ------ ---------------- ----- -------- ----- ------------ ----- ---------- ----- ----------- ------ -------- ------- -
4.2 配置项说明
animate- Toast 显示和消失的动画效果，默认为框架提供的动画效果。position- Toast 显示位置，可选值为 top、bottom、center，默认为 top。showCloseButton- 是否显示关闭按钮，默认为 true 显示。timeout- Toast 显示的时间，单位为毫秒，默认为 5000 毫秒。newestOnTop- 是否将最新的 Toast 放在最上方，默认为 true。toastLife- Toast 实例的生命期，如果需要在 Toast 显示完毕后进行一些操作，可以使用该项。enableHTML- 是否允许 Toast 消息包含 HTML 元素，默认为 false。dismiss- Toast 消失的触发条件，可选值为 click、auto，默认为 click 点击会消失。
4.3 设置配置项
使用 ToastModule 模块的 forRoot(options: ToastOptions) 方法设置配置项：
-- -------------------- ---- -------
------ - ------------ ------------ - ---- ------------
----- -------- ------------ - -
-------- -----------
--------- ------
---------------- -----
-------- -----
------------ -----
---------- -----
----------- ------
-------- ------
-
-----------
-------- -
----------------------------
-
--
------ ----- --------- - -上面的示例中将动画效果修改为从右侧飞入，位置修改为顶部。
5. 总结
通过本文，你已经学会了如何使用 npm 包 ng2-Toast。它支持多种配置，可以定制 Toast 样式和行为。在实际开发中，这款 Toast 组件能够帮助我们快速开发出漂亮的提示消息。
完整的示例代码可以在我的 GitHub 仓库中查看：ng2-Toast-demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005666381e8991b448e2839