在现代的Web开发中，前端框架已经成为了不可避免的趋势。Angular是其中一款流行的前端框架，而ngx-toasty就是一个基于Angular的npm包，它可以为Angular应用程序提供可定制的通知和提醒功能。
安装
首先，我们需要安装ngx-toasty。可以通过以下命令在Angular项目中安装它：
npm install ngx-toasty --save
基础使用
在安装完ngx-toasty后，我们可以在代码中使用它来提供各种不同类型的通知。
以下是使用demo：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ------------- ------------- --------- - ---- -------------
------------
--------- -----------
--------- -
-----
------- ------------------------ --------------
---------- ----------- ----- -- ------- -------------------- ---------------------- ----------- -- - -- --------- --------------
------
-
--
------ ----- ------------ -
------ ------- ---------------- - ---
------------------- ----------------------------
------- ------------- ------------- -
----------------------- - ------------
-
---------- -
------------------
------ ------ -------
---- ------ ---------
---------- -----
----- ---------
---
--------------------------------------------------------------
-
-在这段代码中，我们可以看到如何在AppComponent中使用ngx-toasty。
常见API
- 默认配置项：使用toastyConfig设定
参考代码：
constructor(private toastyConfig: ToastyConfig) {
this.toastyConfig.theme = 'default';
this.toastyConfig.position = 'top-center';
this.toastyConfig.limit = 5;
}- toast.popup：这是默认的提示弹出。例如：
this.toastyService.error('This is an error toast.');- toasty.success,error,warning,info：这些API是非常有用的，因为它们提供了不同类型的通知。例如：
this.toastyService.success('This is a success toast.');
this.toastyService.warning('This is a warning toast.');
this.toastyService.error('This is an error toast.');
this.toastyService.info('This is an info toast.');定制Toast和提示内容
我们可以通过设置ToastOption和ToastData对象的不同属性来定制ngx-toasty的外观和行为。
可以设置如下属性：
showClose :boolean //是否显示关闭按钮 timeout:number //自动关闭时间，默认值：5000 theme:string //主题名称，默认值：default limit:number // 显示的Toast数量，默认值：5 position:string // 显示的位置, 可取值“top-left”，“top-right”，“top-center”，“bottom-left”，“bottom-right”，“bottom-center”。
以下是一个打开自动关闭功能且定制定制位置和Toast样式的示例：
-- -------------------- ---- -------
---------- -
------------------
------ ------ -------
---- ------ ---------
---------- -----
-------- -----
------ ------------
----- ----------
--------- --------------
---
--------------------------------------------------------------
-总结
ngx-toasty是一个非常有用的npm包，它可以帮助我们简化和加强Angular应用程序中的通知系统。通过这篇文章，希望我们对它的基础使用方法和常用API有了更深入了解，并且也愿意通过自己的实践和学习进一步定制和优化自己的ngx-toasty使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567fd81e8991b448e422e