angular通知组件--angular2-toaster

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);
  }