nk-ngx-bootstrap 是一个基于 Angular 框架的 Bootstrap UI 组件库。它提供了一系列常用的 UI 组件，如模态框、下拉菜单、表格等，并能够与 Angular 的表单模块无缝集成。本教程将详细介绍如何使用 nk-ngx-bootstrap。
安装
使用 npm 包管理工具进行安装，命令如下：
npm install ngx-bootstrap --save
引入模块
在需要使用 nk-ngx-bootstrap 的模块中引入对应的模块，例如在 app.module.ts 文件中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
-- ----
------ - ----------- - ---- ----------------------
------ - ----------- - ---- ----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------
-- ----
----------------------
---------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在上述代码中，我们引入了 ModalModule 和 AlertModule 两个模块，并使用 forRoot() 方法来初始注册这两个模块。
使用组件
以 Modal 组件为例，我们可以在组件中通过以下代码来打开一个 Modal：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- ---------- - ---- ----------------------
------ - --------------------- - ---- ------------------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----------- -----------
------------------- ------------- --------------- --
----------- -
--------------- - ----------------------------------------------
---------------------------- - -----
-
-在上述代码中，我们通过 BsModalService 服务来创建了一个 Modal，并将 ModalContentComponent 作为 Modal 的内容。同时，我们也可以在打开 Modal 时通过 content 属性来传递参数。
下面是 ModalContentComponent 组件的代码：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------ - ---------- - ---- ----------------------
------------
--------- --------------------
--------- -
---- ---------------------
--- ------------------ ----------------- --------------
------- ------------- ------------ ----------- ------------------ ----------------------------
----- ---------------------------------
---------
------
---- -------------------
--------- ------- - --------- ----- -------
------
---- ---------------------
------- ------------- ---------- ------------ ---------------------------------------
------
-
--
------ ----- --------------------- -
-------- ----- -------
------------------ ----------- ----------- --
-在上述代码中，我们定义了一个 ModalContentComponent 组件，并使用 @Input() 装饰器来声明了一个 name 属性，用于接收从父组件传递过来的参数。同时，我们在组件的模板中使用了 Bootstrap 的样式和代码，实现了一个基本的 Modal。
总结
nk-ngx-bootstrap 的使用非常简单，只需要安装和引入模块后，即可通过创建和传递参数来使用组件。同时，nk-ngx-bootstrap 的组件也提供了丰富的自定义配置和事件，可以满足各种使用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5b51ab1864dac66fef