bootstrap
直接引用外網鏈接
在 index.html文件引入
<link rel="stylesheet" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件较木。你也可以根據(jù)需要只加載單個插件理肺。 -->
<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 })
// 其中第二個參數(shù)為提示框的標題稼病，第三個參數(shù)可以對toastr做一些配置，比如顯示時間掖鱼、顯示位置等等
參考
Angular 5 toastr提示插件小結
toastr 通知提示插件
這是一篇事后補寫的筆記然走，很多地方都還沒有做足夠的嘗試，只是之前用到什么 記得什么就記錄一下戏挡。同樣放一些參考鏈接上來吧
至于對提示框進行配置的那些屬性芍瑞，我只試過顯示時間、位置褐墅、進度條拆檬，其他有的試過但是參數(shù)寫的不對，暫時也沒有深究掌栅，所以不清楚可不可以這樣寫秩仆，改天有空試試再作補充码泛，或者猾封，廣大網友也可以補充一哈~
