bootstrap
直接引用外网链接
在 index.html文件引入
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
参见官网 起步
安装依赖
要是不想用外网链接，还可以把包安装下来
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 通知提示插件
这是一篇事后补写的笔记，很多地方都还没有做足够的尝试，只是之前用到什么 记得什么就记录一下。同样放一些参考链接上来吧
至于对提示框进行配置的那些属性，我只试过显示时间、位置、进度条，其他有的试过但是参数写的不对，暂时也没有深究，所以不清楚可不可以这样写，改天有空试试再作补充，或者，广大网友也可以补充一哈~
