引入 toastr 彈出訊息框

1 篇文章 / 0 new
author
引入 toastr 彈出訊息框
套件  toastr 提供彈出框訊息功能, 如何整入 service 方便程式使用
► NotificationService
import { Injectable } from '@angular/core';
declare var toastr: any;
@Injectable()
export class NotificationService {
    private _toastr: any = toastr;
    private timeOut: number = 3000;
    constructor() {
        this._toastr.options.progressBar = true;
        this._toastr.options.closeButton = true;
    }
    // 成功
    public success(msg:string, subMsg?:string) {
        this._toastr.success(msg, subMsg, {
            "timeOut": this.timeOut,
            "extendedTImeout": "0"
        });
    }
    // 警告
    public warning(msg:string, subMsg?:string) {
        this._toastr.warning(msg, subMsg, {
            "timeOut": this.timeOut+2000,
            "extendedTImeout": "3"
        });
    }
    // 失败
    public error(msg:string, subMsg?:string) {
        this._toastr.error(msg, subMsg, {
            "timeOut": "0",
            "extendedTImeout": "0"
        });
    }
    // 訊息
    public info(msg:string, subMsg?:string) {
        this._toastr.info(msg, subMsg, {
            "timeOut": this.timeOut,
            "extendedTImeout": "0"
        });
    }
}

► 元件內注入使用
constructor(public toast: NotificationService) {
        this.toast.warning('內容', '標題');
}
Free Web Hosting