Angular使用bootstrap样式和ngx-toastr提示框

bootstrap

---

直接引用外网链接

在 index.html文件引入

参见官网 起步

安装依赖

要是不想用外网链接，还可以把包安装下来

npm install bootstrap@latest
npm install jquery --save 

引入样式

在全局样式 styles.css 引入

@import "~bootstrap/dist/css/bootstrap.min.css"

在 angular.json 引入

"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"

这个我忘记需不需要引入popper了，如果需要的话再npm一下
然后同样引入在 angular.json

"./node_modules/popper.js/dist/umd/popper.js",

这个我是放在了上面两行的中间的

ngx-toastr

---

安装依赖

npm install ngx-toastr --save
// 应该还需要下面这个依赖，如果没有的话就要安装
npm install @angular/animations --save

引入样式

同样在全局样式 styles.css 引入

@import "~ngx-toastr/toastr.css"

注入模块

在根模块注入

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

imports: [
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 20000,
      positionClass: 'toast-top-center'
    })
  ],
// forRoot()里的也可不填，在使用的时候再做调整

在组件注入

import { ToastrModule } from 'ngx-toastr';

使用

在组件声明全局变量，即可食用

constructor( private toastr: ToastrService ) { }

this.toastr.success('success 提示！','成功提示',{ timeOut: 3000 })
this.toastr.info('info 提示！','信息提示',{ timeOut: 3000 })
this.toastr.warning('warning 提示！','警告提示',{ timeOut: 3000 })
this.toastr.error('error 提示！','错误提示',{ timeOut: 3000 })
// 其中第二个参数为提示框的标题，第三个参数可以对toastr做一些配置，比如显示时间、显示位置等等

参考

---

Angular 5 toastr提示插件小结
toastr 通知提示插件

这是一篇事后补写的笔记，很多地方都还没有做足够的尝试，只是之前用到什么 记得什么就记录一下。同样放一些参考链接上来吧

至于对提示框进行配置的那些属性，我只试过显示时间、位置、进度条，其他有的试过但是参数写的不对，暂时也没有深究，所以不清楚可不可以这样写，改天有空试试再作补充，或者，广大网友也可以补充一哈~