angular6 使用信息提示框toast

需求描述：

   在操作结束后，需要在页面右下角弹出提示信息，且在一定的时间可以自动消失。

现有环境：Angular6+bootStrap

先看效果：

方案：选取了ngx-toastr这个插件

集成步骤：

1、安装ngx-toastr和它的依赖@angular/animations

npm install ngx-toastr --save
npm 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 './app.component';
 
@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 --save

npm install [email protected] --save

 另外，记得若手动修改了package.json的依赖版本号后，记得npm install重新安装

参考文档：

ngx-toastrGit上的说明: https://www.npmjs.com/package/ngx-toastr

网上的安装说明：https://www.cnblogs.com/lucky-heng/p/11129462.html

版本错误处理办法：https://www.cnblogs.com/Julie-ye/p/12034711.html