使用 Angular 9/8 的 Bootstrap 折叠

在本节中，我们将学习 Bootstrap 折叠。 我们将使用 Angular 9 或 Angular 8 来完成。 Bootstrap 提供了 Ng Bootstrap 的功能，它还提供了 Bootstrap 3 和 Bootstrap 4 的原生 Angular 指令，例如按钮、工具提示、模型、分页、折叠、日期选择器等。 借助 Ng Bootstrap 也可以轻松使用 Bootstrap UI。 在我们的以下示例中，将创建折叠，我们将在我们的应用程序中使用它。 要在我们的 Angular 应用程序中执行 Bootstrap 折叠，逐步过程如下

步骤 1

在这一步中，我们将创建新的应用程序。 以下命令将用于创建新的 Angular 应用程序。

步骤 2

在第二步中，我们将安装 Bootstrap 4。 在这里，将安装 Bootstrap 的核心包。 为了安装它，将使用 Bootstrap CSS。 以下命令用于安装它

当我们成功安装它时，我们必须添加 Bootstrap CSS，例如“node_modules/bootstrap/dist/css/bootstrap.min.css”。 为此，我们将使用我们的 angular.json 文件，并将以下代码添加到其中

angular.json

步骤 3

在这一步中，我们将安装 Ng Bootstrap。 在这里，将安装 Ng Bootstrap 的包。 为了安装它，将使用 Bootstrap UI。 以下用于安装它

步骤 4

在这一步中，我们将安装 Module。 在这里，我们将使用一个名为 app.module.ts 的文件并将 NgModule 导入其中，如下所示

src/app/app.module.ts

步骤 5

在这一步中，我们将更新 View 文件。 在这里，我们将使用我们的 HTML 文件并更新该文件。 在其中，我们还将创建一个 Bootstrap 折叠的示例，如下所述

src/app/app.component.html

步骤 6

在这一步中，我们将更新 ts 文件。 在这里，我们将使用我们的 app.component.ts 文件并像这样更新该文件

src/app/app.component.ts

现在我们上面的代码已经准备好运行了。为了运行上面的代码，我们将使用以下命令

当我们运行此命令时，将生成以下输出