“ngx-bootstrap”是一個(gè)angular的一個(gè)UI框架，是Angular快速繼承bootstrap3或bootstrap4組件的最佳方式，可以有效地提高開(kāi)發(fā)效率；可以利用“npm install ngx-bootstrap –save”命令進(jìn)行安裝“ngx-bootstrap”。

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap5版、DELL G3電腦

ngx bootstrap是什么

ngx-bootstrap 是angular的一個(gè)UI框架，是Angular快速集成Bootstrap 3或Bootstrap 4組件的最佳方式。ngx-bootstrap可以提高開(kāi)發(fā)效率。

這里使用的是 @angular/cli 8.2.5，與bootstrap4

1.安裝ngx-bootstrap

—-在項(xiàng)目目錄打開(kāi)cmd控制臺(tái)輸入

—-使用 ”–save“寫入依賴

npm install ngx-bootstrap  --save // 也可以用國(guó)內(nèi)的淘寶鏡像快速安裝 cnpm install ngx-bootstrap --save

2.在項(xiàng)目中引入相應(yīng)的css

在angualr.json文件中的styles全局樣式中加入相應(yīng)的路徑

 "styles": [               "../node_modules/bootstrap/scss/bootstrap"             ],

3.導(dǎo)入依賴

引入全局css樣式后想要使用相應(yīng)的組件還需要在相應(yīng)的module中導(dǎo)入相關(guān)依賴才能正常使用

這里引入折疊組件與tab選項(xiàng)卡組件

首先在頭部引入組件

import {CollapseModule, TabsModule} from 'ngx-bootstrap';

其次需要在@NgModule中的imports中聲明

@NgModule({   imports: [     TabsModule.forRoot(),     CollapseModule.forRoot(),   ], })

然后就可以使用啦