Angular toastr提示框

标签：image   save   cto   info   roo   隐藏   tco   右上角   for   

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提示框

标签：image   save   cto   info   roo   隐藏   tco   右上角   for   

原文地址：https://www.cnblogs.com/zero-zm/p/9932272.html