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地址。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！