套件 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('內容', '標題');
}