ngx-toastr
Demo:
1.安装
npm install ngx-toastr --save
需要依赖@angular/animations
npm install @angular/animations --save
如果不想用这个依赖，可以参考（但是通常都会安装aimations的）：
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'
}
);
具体配置属性：
也可以查看开始的Demo地址。