简介
ngx-bootstrap-1.x-maintain 是一款基于 Angular 和 Bootstrap 的 UI 库，它提供了许多常用的 UI 组件，如模态框、日期选择器、下拉菜单、分页器等等。通过 ngx-bootstrap-1.x-maintain ，我们可以更加方便地构建复杂的前端界面。
安装
要使用 ngx-bootstrap-1.x-maintain ，我们先需要安装它。我们可以通过 npm 来安装它。在终端上执行以下命令：
npm install ngx-bootstrap@1.x-maintain --save
引入
安装完成后，我们需要将它引入到我们的项目中。
在 angular.json 中配置 styles 和 scripts 数组，加入以下代码：
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]在 app.module.ts 中导入以下代码：
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@NgModule({
imports: [BsDatepickerModule.forRoot()]
})使用
现在我们可以在我们的组件中使用 ngx-bootstrap-1.x-maintain 提供的组件了。下面以日期选择器 bs-datepicker 为例，介绍它的使用。
在组件模板中加入以下代码：
<input type="text" class="form-control" bsDatepicker [(bsValue)]="bsValue" [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }">在组件类中导入以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ---------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------- - --- -------
--------- ----------------------------
------------- -
------------- - ----------------- - --------------- ------------ ---
-
-示例代码
完整的日期选择器示例代码如下：
<input type="text" class="form-control" bsDatepicker [(bsValue)]="bsValue" [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }">-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ---------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------- - --- -------
--------- ----------------------------
------------- -
------------- - ----------------- - --------------- ------------ ---
-
-总结
本文针对 ngx-bootstrap-1.x-maintain 的使用进行了详细的介绍。希望本文能够帮助你更好地使用 ngx-bootstrap-1.x-maintain 。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739481e8991b448e9850