标签：width lan tar ade npm false container mis com
1、安装
npm install angular2-toaster
地址：https://github.com/stabzs/Angular2-Toaster demo地址：http://plnkr.co/edit/hkENUhos6q9fhiOHprXO?p=preview&preview
2、在 angular.json 下的 styles 添加
"styles": [ ...... "./node_modules/angular2-toaster/toaster.min.css" ],
3、在 module 中导入
import { ToasterModule, ToasterService } from ‘angular2-toaster‘;
@NgModule({
imports: [
......
ToasterModule,
],
providers: [
......
ToasterService,
]
}
4、在 app.component.ts 中添加配置
import { ToasterConfig } from ‘angular2-toaster‘;
// 通知配置
public config: ToasterConfig =
new ToasterConfig({
// ‘toast-top-full-width‘, ‘toast-bottom-full-width‘, ‘toast-center‘,‘toast-top-left‘,
// ‘toast-top-center‘, ‘toast-top-right‘,‘toast-bottom-left‘, ‘toast-bottom-center‘, ‘toast-bottom-right‘
positionClass: ‘toast-bottom-right‘, // 展示位置
showCloseButton: false, // 是否展示关闭按钮
tapToDismiss: true, // 为true时，点击通知的任意部分，通知都将关闭
timeout: { success: 3500, info: 3500, error: 3500, warning: 3500, wait: 3500 }, // 展示的时间，默认为5000
limit: 5, // 展示的最大数量
animation: ‘flyRight‘, // ‘fade‘, ‘flyLeft‘, ‘flyRight‘, ‘slideDown‘, ‘slideUp‘
});
5、在 app.component.html 添加
<toaster-container [toasterconfig]="config"></toaster-container>
6、在其他组件中使用
<button class="ml-6 mt-6" (click)="popToast()">弹出消息</button>
import { Toast, ToasterService } from ‘angular2-toaster‘;
popToast() {
const toast: Toast = {
type: ‘success‘,
title: ‘通知标题‘,
timeout: 3500,
body: ‘通知内容，巴拉巴拉，更加快速导航多少积分多少‘,
progressBar: true, // 是否开启进度条
progressBarDirection: ‘decreasing‘// 进度条方向 decreasing increasing
};
this.toasterService.pop(toast);
}
标签：width lan tar ade npm false container mis com
原文地址：https://www.cnblogs.com/juanheqiao/p/14204698.html
