Angular 5 toastr提示插件小结

ngx-toastr

https://github.com/scttcper/ngx-toastr

Demo:

https://scttcper.github.io/ngx-toastr/

1.安装

npm install ngx-toastr --save

需要依赖@angular/animations

npm install @angular/animations --save

如果不想用这个依赖，可以参考（但是通常都会安装aimations的）：

https://github.com/scttcper/ngx-toastr#setup-without-animations

2.添加css样式：

在.angular-cli.json中添加

" styles " : [

" styles.scss " ,

" ../node_modules/ngx-toastr/toastr.css "

]

3.根模块注入：

import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; //需要

import { ToastrModule } from 'ngx-toastr';

...

imports: [

   ...

    BrowserAnimationsModule,

    ToastrModule.forRoot()

]

4.使用：

import { ToastrService } from 'ngx-toastr';

...

constructor( public toastr: ToastrService ) {}

showSuccess() {

    this . toastr . success ( ' Hello world! ' , ' Toastr fun! ' );

}

可以对toastr做一些配置，比如，显示的位置，显示时间，显示颜色等等

this.toastr.warning('Too high!', 'Warning!',

    {

      timeOut: 0,

      closeButton: false,

      positionClass: 'toast-top-center'

    }

  );

具体配置属性：

https://github.com/scttcper/ngx-toastr#options

也可以查看开始的Demo地址。