在前端开发的过程中，我们经常会用到许多工具和框架，其中的 npm 包是非常重要的一部分。本文将介绍一个强大的 UI 库，@rajkeshwar/ng-bootstrap，它是 Bootstrap 4 样式的 Angular 实现。接下来，我们将详细讲解如何使用这个包。
安装
首先，我们需要用 npm 安装这个包。请打开命令行并键入以下命令：
npm install @rajkeshwar/ng-bootstrap --save
导入模块
安装完成后，我们需要在 AppModule 中导入 NgBootstrapModule。请在您的 AppModule 中添加以下代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------------- - ---- --------------------------- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ------------------- ---------- --------------- -- ------ ----- --------- --
使用组件
接下来，我们将讨论一些最常见的组件，并介绍如何使用它们。
警告框
警告框是一个用于显示警告或错误信息的组件。以下是使用警告框组件的示例代码：
<ngb-alert [dismissible]="false" type="danger">错误信息！</ngb-alert>
dismissible表示警告框是否可以被关闭。如果为true，将会显示一个关闭按钮。type表示警告框的类型。这个属性可以是success（成功）、warning（警告）、info（信息）或danger（危险）。
模态框
模态框是显示在当前页面之上的一个弹出窗口，通常用于获取用户的输入或显示重要信息。以下是使用模态框组件的示例代码：
-- -------------------- ---- -------
------- ---------- ------------ --------------------------------------
------------ -------- ----------
---- ---------------------
--- ------------------------------
------- ------------- ------------- ------------------ --------------------------
----- ---------------------------------
---------
------
---- -------------------
------------
------
---- ---------------------
------- ------------- ---------- -------------- -------------------------------------
------- ------------- ---------- ------------------------
------
--------------content是一个模板引用变量，用于引用模态框组件中的内容。open(content)是一个打开模态框的方法。它接收模板引用变量作为参数。- 模板中的其它代码用于显示模态框的标题、内容和按钮。
标签页
标签页是显示多个页面或区域的组件。以下是使用标签页组件的示例代码：
-- -------------------- ---- -------
------------
-------- ---------- ---
------------ --------------
------ - --------
--------------
----------
-------- ---------- ---
------------ --------------
------ - --------
--------------
----------
-------------ngb-tabset是标签页组件的容器。ngb-tab表示一个标签页。您可以为每个标签页设置一个标题。ngbTabContent是一个模板引用变量，用于显示标签页的内容。
倒计时器
倒计时器是一个显示倒计时的组件。以下是使用倒计时器组件的示例代码：
<ngb-progressbar type="success" [value]="50"></ngb-progressbar>
type表示进度条的颜色。这个属性可以是success、info、warning、danger或primary。value表示进度条的值。取值范围是 0-100。
总结
在本文中，我们介绍了如何安装、导入和使用 @rajkeshwar/ng-bootstrap 包。我们讨论了一些最常见的组件，并提供了示例代码。希望您能从本文中获得一些有用的知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591b81e8991b448d68d0