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. 瀏覽器訪問: