需求描述：
在操作结束后，需要在页面右下角弹出提示信息，且在一定的时间可以自动消失。
现有环境：Angular6+bootStrap
先看效果：
方案：选取了ngx-toastr这个插件
集成步骤：
1、安装ngx-toastr和它的依赖@angular/animations
npm install ngx-toastr --savenpm install @angular/animations --save
2、在angular.json中添加css样式
"styles": ["styles.scss","node_modules/ngx-toastr/toastr.css"]
3、在app.module中导入相关模块
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { ToastrModule } from 'ngx-toastr';import { AppComponent } from './ponent';@NgModule({imports: [BrowserAnimationsModule,ToastrModule.forRoot()],bootstrap: [AppComponent],declarations: [AppComponent]})class AppModule {}
4、业务代码中使用toast
import { ToastrService } from 'ngx-toastr';@Component({...})export class YourComponent {constructor(private toastr: ToastrService) {}showSuccess() {this.toastr.success('Hello world!', 'Toastr fun!');}}
可以设置消失时间为3秒：
this.toastr.success('Hello world!', 'Toastr fun!', {timeOut: 3000})
提示信息默认在右上角位置，我们希望在右下角：
this.toastrService.success(message, '', {positionClass: 'toast-bottom-right'});
这里需要注意几个坑：
1.toastr的版本和Angular的版本是有对应要求的。所以根据自己的Angular版本安装对应的ngx-toastr，否则会出问题
2、还是版本的问题，直接npm install xxx的时候会下载最新的版本，而实际开发中，我们的Angular版本和其核心版本可能都是特定的，因此此处需要留意，我是在这搞了半天。。。
3、还是版本的问题，没办法，这个坑实在太坑。。在解决版本的过程中，碰到如下问题
原因：
是因为rxjs版本问题造成的
解决方案：
使用npm：
npm uninstall rxjs --savenpm install rxjs@6.0.0 --save
另外，记得若手动修改了package.json的依赖版本号后，记得npm install重新安装
参考文档：
ngx-toastrGit上的说明: /package/ngx-toastr
网上的安装说明：/lucky-heng/p/11129462.html
版本错误处理办法：/Julie-ye/p/12034711.html
