前端开发经常需要用到一些提示工具，比如成功/失败的提示框等等。@rocketloop/ng2-toasty是一款Angular 2.x/4.x的Toast提示插件，它简单易用，样式可自定义。本文将详细讲解@rocketloop/ng2-toasty的使用方法，希望对于前端开发者有所帮助。
安装
在使用@rocketloop/ng2-toasty之前我们需要先安装它，可以通过以下命令来安装：
npm install --save @rocketloop/ng2-toasty
引入
在安装之后，我们需要在模块中引入@rocketloop/ng2-toasty：
import { ToastyModule } from '@rocketloop/ng2-toasty';
@NgModule({
imports: [ToastyModule.forRoot()]
})
export class AppModule { }使用
创建实例
在使用@rocketloop/ng2-toasty之前，我们需要先创建一个实例，这样我们才能在需要的时候使用它。
-- -------------------- ---- -------
------ - -------------- ------------- ------------- --------- - ---- -------------------------
------------
--------- ---------
------------ ----------------------
--
------ ----- ------------ -
------------------- -------------- -------------- ------- ------------- ------------- - -
----------- -
----- ------------- ------------ - -
------ ------ -------
---- ------ ---------
---------- -----
-------- -----
------ ---------
--
-----------------------------------------
-
-方法说明
success(options: ToastOptions)
成功提示
const toastOptions: ToastOptions = {
title: 'Toast Title',
msg: 'Toast Message',
showClose: true,
timeout: 3000,
theme: 'default'
};
this.toastyService.success(toastOptions);error(options: ToastOptions)
错误提示
const toastOptions: ToastOptions = {
title: 'Toast Title',
msg: 'Toast Message',
showClose: true,
timeout: 3000,
theme: 'default'
};
this.toastyService.error(toastOptions);warning(options: ToastOptions)
警告提示
const toastOptions: ToastOptions = {
title: 'Toast Title',
msg: 'Toast Message',
showClose: true,
timeout: 3000,
theme: 'default'
};
this.toastyService.warning(toastOptions);info(options: ToastOptions)
信息提示
const toastOptions: ToastOptions = {
title: 'Toast Title',
msg: 'Toast Message',
showClose: true,
timeout: 3000,
theme: 'default'
};
this.toastyService.info(toastOptions);wait(options: ToastOptions)
等待提示
const toastOptions: ToastOptions = {
title: 'Toast Title',
msg: 'Toast Message',
showClose: true,
timeout: 3000,
theme: 'default'
};
this.toastyService.wait(toastOptions);自定义样式
默认情况下，@rocketloop/ng2-toasty的样式是固定的，但是它提供了一些API供我们自定义样式。
在模块中可以使用以下方法来设置全局样式：
-- -------------------- ---- -------
------ - ------------- -------------- ------------ - ---- -------------------------
-----------
-------- -------------------------
---------- -
--------------
------------
-
--
------ ----- --------- -
------------------- ------------- ------------- -
----------------------- - -----------
------------------------- - -----
-------------------------- - ---------------
-
-toastOptions参数说明
- title：提示框的标题
- msg：提示框的内容
- showClose：是否显示关闭按钮
- timeout：提示框自动关闭的时间，设置为0表示不会自动关闭
- theme：提示框的主题，可选default、material、bootstrap、bootstrap-orange、bootstrap-white
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ------------- ------------ - ---- -------------------------
------------
--------- -----------
--------- -
------- -------------------------- --------------
-
--
------ ----- ------------ -
------------------- -------------- -------------- ------- ------------- ------------- -
----------------------- - -----------
-
----------- -
----- ------------- ------------ - -
------ ------ -------
---- ------ ---------
---------- -----
-------- -----
------ ---------
--
-----------------------------------------
-
-总结
本文简单介绍了@rocketloop/ng2-toasty的使用方法，如果您已经掌握了该插件的使用，相信在进行前端开发时会变得更加快速和高效。当然，根据不同的应用场景，我们还需要进一步灵活使用和定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672881e8991b448e3a7e