Angular toastr提示框

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. 浏览器访问: