在前端开发中，我们常常需要使用一些 UI 库来快速构建页面，而 ngx-bootstrap 就是一个非常流行的 Angular UI 库。在 ngx-bootstrap 库中，@kwall2004/ngx-bootstrap 是一个非常实用的组件库，它能够让我们更加简单地创建各种 UI 组件。本文就将详细介绍如何使用 @kwall2004/ngx-bootstrap 包来实现一些基本的 UI 组件。
安装
在开始使用 @kwall2004/ngx-bootstrap 之前，我们需要先安装它。为了安装这个组件库，我们需要在终端窗口中运行以下命令：
npm install @kwall2004/ngx-bootstrap --save
这个命令将自动安装 @kwall2004/ngx-bootstrap 包及其依赖项，并将其添加到 package.json 文件中。
使用
我们现在已经安装了 @kwall2004/ngx-bootstrap，接下来就可以在我们的 Angular 应用程序中使用它了。在使用 @kwall2004/ngx-bootstrap 之前，我们需要在 AppModule 中先导入它：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
-- -- ------------------------ -----
------ - ----------- - ---- ---------------------------------
------ - ------------- - ---- -----------------------------------
-----------
------------- ---------------
-------- -
--------------
-- -- ------------------------ -----
----------------------
------------------------
--
---------- ---
---------- ---------------
--
------ ----- --------- --在导入 @kwall2004/ngx-bootstrap 包之后，我们就可以使用它提供的各种组件了。下面我们来看一些常用的组件及其使用示例。
Alert
Alert 组件是一个用于显示警告信息的组件。可以通过 Alert 组件来快速实现一些简单的提示信息。
在 Angular 中，我们可以这样使用 Alert 组件：
<alert type="success">操作成功！</alert>
以上代码将显示一个绿色圆角框，内部显示文本 “操作成功！”。
Alert 组件支持以下几种类型：
success：成功提示warning：警告提示danger：错误提示info：信息提示
Alert 组件还支持其他辅助功能，如自动关闭、关闭按钮等，可以通过设置对应的属性来实现。
Button
Button 组件是一个常用的 UI 组件，它可以用于在页面上添加按钮，以便进行各种交互操作。
在使用 Button 组件时，我们可以指定按钮的样式、大小、图标等属性。例如：
<button type="button" class="btn btn-primary btn-lg"> <i class="glyphicon glyphicon-plus"></i> 添加 </button>
以上代码将显示一个带有加号图标的大号蓝色按钮。
Button 组件支持以下几种样式：
default：默认样式primary：蓝色样式success：绿色样式info：青色样式warning：黄色样式danger：红色样式link：链接样式
Button 组件还支持以下几种大小：
xs：超小号sm：小号lg：大号
同时，Button 组件还支持各种图标，可以通过在按钮内部添加对应的图标元素来实现。
Conclusion
在本文中，我们详细地介绍了如何使用 @kwall2004/ngx-bootstrap 包来实现一些常用的 UI 组件。通过本文的学习，您应该已经掌握了如何使用 Alert 和 Button 组件，并能够在自己的项目中快速构建出各种 UI 组件。
当然，@kwall2004/ngx-bootstrap 包还支持很多其他的 UI 组件和功能，如模态框、分页、轮播图等等。如果您有兴趣，请查看官方文档或者通过实践来进一步学习使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66e65