1. 安装ngx-toastr包


npm install ngx-toastr --save

2. package.json中引入toastr样式文件


"styles": ["./node_modules/ngx-toastr/toastr.css" ]

3. 根模块中导入Toastr模块


import {ToastrModule} from 'ngx-toastr'; imports: [ ToastrModule.forRoot() ]

4. 组件中使用toastr提示框


import {ToastrService} from 'ngx-toastr'; export class TestComponent { // 注入Toastr服务 constructor(private _toastrService: ToastrService) { } // 使用 prevPage() { this._toastrService.info('info提示', '这已经是第一页了');
this._toastrService.success('success提示', '这已经是第一页了');
this._toastrService.warning('warning提示', '这已经是第一页了');
this._toastrService.error('error提示', '这已经是第一页了'); } }

可以对提示框进行配置


this._toastrService.warning('提示内容', '提示标题!(可省略此参数)',
{
closeButton: false,
debug: false,
progressBar: true,
positionClass: "toast-bottom-center",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "2000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
}
);

参数说明:

  • closeButton:false,是否显示关闭按钮(提示框右上角关闭按钮);
  • debug:false,是否为调试;
  • progressBar:false,是否显示进度条(设置关闭的超时时间进度条);
  • positionClass,消息框在页面显示的位置
  toast-top-left  顶端左边
toast-top-right 顶端右边
toast-top-center 顶端中间
toast-top-full-width 顶端,宽度铺满整个屏幕
toast-botton-right
toast-bottom-left
toast-bottom-center
toast-bottom-full-width
  • onclick,点击消息框自定义事件
  • showDuration: “300”,显示动作时间
  • hideDuration: “1000”,隐藏动作时间
  • timeOut: “2000”,自动关闭超时时间
  • extendedTimeOut: “1000”
  • showEasing: “swing”,
  • hideEasing: “linear”,
  • showMethod: “fadeIn” 显示的方式,和jquery相同
  • hideMethod: “fadeOut” 隐藏的方式,和jquery相同

5. 浏览器访问:

Angular toastr提示框的更多相关文章

  1. Jquery toastr提示框

    toastr是一个基于JQuery的消息提示插件; 1. 下载toastr和jquery https://jquery.com/download/ https://codeseven.github.i ...

  2. toastr操作完成提示框

    toastr.js组件 关于信息提示框,项目中使用的是toastr.js这个组件,这个组件最大的好处就是异步.无阻塞,提示后可设置消失时间,并且可以将消息提示放到界面的各个地方. 官方文档以及源码 源 ...

  3. FastAdmin 提示框 toastr 改变文字

    如下图这个消息提示框为 toastr. FastAdmin 用的就是 toast 前端组件. 那如何改变这个文字呢? Karson:只要后台使用$this->success("自定义成 ...

  4. [转]Angular——提示框

    本文转自:https://blog.csdn.net/whm18322394724/article/details/80177950 版权声明:本文为博主原创文章,未经博主允许不得转载. https: ...

  5. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  6. 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

    在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...

  7. Bootstrap:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  8. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  9. Bootstrap实现弹出框和提示框效果代码

    一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...

随机推荐

  1. Windows GIT SSH 免密教程

    Windows GIT SSH 免密教程 安装git客户端,最新下载地址如下 https://github.com/git-for-windows/git/releases/download/v2.2 ...

  2. .Net Core 2.2与Java 12性能对比

    我发现基准游戏(https://benchmarksgame-team.pages.debian.net/benchmarksgame/fastest/csharp.html)是一套非常好的基准测试. ...

  3. .NET Core 学习资料精选:进阶

    .NET 3.0 这个月就要正式发布了,对于前一篇博文<.NET Core 学习资料精选:入门>大家学的可还开心?这是本系列的第二篇文章:进阶篇,喜欢的园友速度学起来啊. 对于还在使用传统 ...

  4. 北京2018网络赛 hihocoder#1828 : Saving Tang Monk II (BFS + DP +多开一维)

    hihocoder 1828 :https://hihocoder.com/problemset/problem/1828 学习参考:https://www.cnblogs.com/tobyw/p/9 ...

  5. 染色 Wannafly挑战赛20 A 思维

    链接:https://www.nowcoder.com/acm/contest/133/A来源:牛客网 现在有一棵被Samsara-Karma染了k种颜色的树,每种颜色有着不同的价值 Applese觉 ...

  6. 使用Elastic APM监控你的.NET Core应用

    作者:Jax 前言 在应用实际的运维过程中,我们需要更多的日志和监控来让我们对自己的应用程序的运行状况有一个全方位的了解.然而对于大部分开发者而言,平时大家所关注的更多的是如何更优雅的实现业务,或者是 ...

  7. 深度剖析Vue中父给子、子给父、兄弟之间传值!

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

  8. IDEA中自动导包快捷键

    1.File-->Settings 2.解释: 勾选标注第1个选项,IntelliJ IDEA 将在我们书写代码的时候自动帮我们导入需要用到的包.但是对于那些同名的包,还是需要手动 Alt + ...

  9. ListView 字母导航排序

    一.概述 ListView字母导航排序,网上已经有很多代码和博客了, 这篇博文也是照搬网上的.  之所以写到这里,不是为了说明什么,只是为了以后自己查阅方便.本来公司要求实现expandablelis ...

  10. HBase WAL原理学习

    1.概述 客户端往RegionServer端提交数据的时候,会写WAL日志,只有当WAL日志写成功以后,客户端才会被告诉提交数据成功,如果写WAL失败会告知客户端提交失败,换句话说这其实是一个数据落地 ...