什么是 npm?
npm 全称 Node Package Manager，前端开发中广泛应用的包管理工具，用于安装、更新、卸载 Node.js 依赖包以及管理项目中的依赖关系。你可以把它看作是一个 Node.js 生态下的全球公共仓库。
什么是 ng2-toasty?
ng2-toasty 是为 Angular 框架开发的一款轻量级的通知消息组件库，适用于各种场景下的通知消息提示，包含多种可定制的主题，简单易用。
安装
先确保你已经安装了 Node.js 和 Angular 开发环境，然后在终端输入以下命令：
npm install ng2-toasty --save
使用
导入模块
打开 app.module.ts 文件，引入 ng2-toasty 模块：
-- -------------------- ---- -------
------ - ------------ - ---- -------------
-----------
-------- -
--------------
---------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -引入样式文件
在全局的样式表中添加 ng2-toasty 样式：
@import "./node_modules/ng2-toasty/style-bootstrap.css";
显示通知消息
在需要显示通知消息的组件中注入 ToastyService：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- -------------
------------
--------- ---------
--------- -------- --------------------------------------
--
------ ----- ------------ ---------- ------ -
------------------- -------------- -------------- --
------------- -
----------------------------
------ -----
---- ------
--
-
-高级用法
自定义位置
如果你需要将通知消息显示在自定义位置，可以通过 ng2-toasty 暴露出来的 ToastyConfig 服务来设置：
-- -------------------- ---- -------
-----------
-------- -
--------------
---------------------
--
------------- ---------------
---------- ---------------
---------- -
-
-------- -------------
--------- -
--------- -----------
-
-
-
--
------ ----- --------- - -自定义主题
通过定义新的 ToastOptions 类型，可以自定义消息主题样式:
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- ------------- ------------ - ---- -------------
------------
--------- ---------
--------- -------- --------------------------------------
--
------ ----- ------------ ---------- ------ -
------------
------- -------------- --------------
------- ------------- ------------
- -
----------------------- - -----------
-
------------- -
--- ----- ------------ - -
------ -----
---- -----
---------- -----
-------- -----
------ -----------
------ ------- -- -
----------------------- -------
--
--------- ------- -- -
----------------------- -------
-
--
------------------------------
-
-结语
ng2-toasty 是一款非常方便实用的 Angular 通知消息组件库，我们可以通过简单的学习掌握使用方法，实现各种常见的通知消息提示功能，为我们的项目提供更加完整的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62061