什么是 @explos/ng-bootstrap？
@explos/ng-bootstrap 是一个基于 Angular 框架的强大 UI 组件库。它用于在开发 Web 应用程序时快速构建美观、易用的交互式用户界面（UI）。该库的设计理念是提供开发人员一个样式一致、易于扩展的工具集，让开发人员专注于业务逻辑的实现，而不用花费大量的时间来编写样式和交互效果。
安装 @explos/ng-bootstrap
在使用 @explos/ng-bootstrap 之前，我们需要先安装它。我们可以使用 npm 或者 yarn 来安装它，具体如下：
# npm 安装方式 npm install --save @explos/ng-bootstrap # yarn 安装方式 yarn add @explos/ng-bootstrap
如何使用 @explos/ng-bootstrap
我们已经安装了 @explos/ng-bootstrap，下面就来介绍一下如何在 Angular 应用程序中使用它。
引入样式
在使用 @explos/ng-bootstrap 之前，我们需要先引入它提供的样式。我们可以在全局的 styles.css 或者一个组件的 styleUrls 中进行引入。具体如下：
-- -------------------- ---- -------
-- ------ --
------- ----------------------------------------
-- ------ --
------------
---------- -
---------------------------------------
-
--引入模块
在使用 @explos/ng-bootstrap 之前，我们需要先引入它提供的模块。我们可以在相应的模块中进行引入，具体如下：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------- - ---- -----------------------
-----------
-------- -
--------------
---------
--
------------- ---------------
---------- --------------
--
------ ----- --------- --使用组件
在引入了样式和模块之后，我们就可以愉快地使用 @explos/ng-bootstrap 的组件了。以 Modal 为例，我们可以在组件中这样使用：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- - ---- -----------------------
------------
--------- ----------------------
--------- -
------- ------------------------------
-
--
------ ----- -------------- -
------------------- ------------- --------- --
------ -
----- -------- - ----------------------------------------------
------------------------------- - --------
-
-
------------
--------- ------------------------------
--------- -
---- ---------------------
--- ------------------------- ----------
------- ------------- ------------- ----------------------------- ---------
----- ---------------------------------
---------
------
---- -------------------
------ ---------
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------- -----------------------
------
-
--
------ ----- --------------------- -
---- - ---
------------------ ------ --------------- --
-以上代码演示了如何使用 Modal 组件，包括 Modal 的打开和关闭，以及与 ModalContentComponent 的交互，例如在 ModalContentComponent 中显示 "Hello, World!" 。
总结
@explos/ng-bootstrap 是一个非常强大的 UI 组件库，它可以极大地提升我们在开发 Web 应用程序时的效率和体验。希望本文对读者能够有所帮助，让读者在使用 @explos/ng-bootstrap 时游刃有余。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571b81e8991b448d40a5