什么是 @upe/ngx-bootstrap-directives
@upe/ngx-bootstrap-directives 是基于 Bootstrap 的 Angular 指令库，它可以大大简化 Angular 与 Bootstrap 的结合使用，并且为开发者提供更为简单高效的解决方案。其中包括了 Bootstrap 提供的很多组件以及其它的一些扩展指令。
安装与环境
@upe/ngx-bootstrap-directives 需要先安装 Bootstrap 的 CSS 和 JavaScript，这里以 Bootstrap 5 为例：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
---- --------- - --- ---
----- ---------------- -------------------------------------------------------------------------------
-------
------
---------------------
---- --------- - ---------- ---
------- --------------------------------------------------------------------------------------------
-------
-------接下来，使用 npm 安装 @upe/ngx-bootstrap-directives：
npm install @upe/ngx-bootstrap-directives --save
在 AppModule 中导入 NgxBootstrapDirectivesModule：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------------------- - ---- --------------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
---------------------------- -- -- ----------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用指南
1. ngbDropdown
ngbDropdown 提供了一个 Bootstrap 下拉框组件，它可以自动判断并添加下拉框所需的样式及事件。
<!-- app.component.html --> <button ngbDropdownToggle>点击下拉</button> <div ngbDropdown> <a class="dropdown-item" href="#">选项一</a> <a class="dropdown-item" href="#">选项二</a> <a class="dropdown-item" href="#">选项三</a> </div>
点击按钮即可展开下拉框。
2. ngbModal
ngbModal 提供了一个 Bootstrap 模态框组件，它可以自动判断并添加模态框所需的样式及事件。
-- -------------------- ---- -------
---- ------------------ ---
------- ------------------------------------
------------ --------------
---- ---------------------
--- ---------------------------
------- ------------- ----------------- ---------------------------------------- ----------------------------
------
---- -------------------
---------
------
---- ---------------------
------- ------------- ---------- -------------- ----------------------------------------------------
------
---------------- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------ - -------- - ---- --------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------ ------------- --------- --
----------- -
---------------------------------------- -- ---- -- ----
-
-3. 直接指定 Bootstrap 样式
有时候可能需要直接在代码中指定一个 Bootstrap 样式，此时可以使用 b-class 指令。
<!-- app.component.html --> <button class="btn" b-class="'btn-primary'">primary</button> <button class="btn" b-class="'btn-danger'">danger</button>
除了 b-class 指令外，还有 b-style、b-attr 等类似指令可以直接指定属性值。
总结
@upe/ngx-bootstrap-directives 提供了很多使用简便的 Angular 指令，只需要在模板中编写少量代码，就可以直接调用 Bootstrap 中的组件或者在项目中添加样式等，这样既简化了代码，又提高了开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005661881e8991b448e1f85