Angular 9/8 中的 Bootstrap 模态弹出窗口

在本节中，我们将学习 Bootstrap 模态弹出框。我们将使用 Angular 8 或 Angular 9 来实现。在我们的应用程序中，我们将使用 Bootstrap 模态弹出框。我们将使用 Ng Bootstrap，以便我们可以使用 Bootstrap 模态弹出框。

Bootstrap 开发了非常流行的 Ng Bootstrap。Ng Bootstrap 提供了 Bootstrap 3 和 Bootstrap 4 的原生 Angular 属性，例如 datepicker、model、buttons 和 pagination 等。Ng Bootstrap 可以轻松使用 Bootstrap UI。在我们的 Angular 8 应用程序中，只需创建一个模态弹出框。创建模态弹出框的步骤如下：

步骤 1

在此步骤中，我们将创建新应用。我们将使用以下命令创建我们的 Angular 应用，如下所示：

步骤 2

在此步骤中，我们将安装 Bootstrap 4。我们将安装 Bootstrap 的核心包。安装 Bootstrap 的命令如下所示：

当我们成功安装 Bootstrap 后，我们需要包含 Bootstrap CSS，例如 "node_modules/bootstrap/dist/css/bootstrap.min.css"。现在我们将使用我们的 angular.json 文件并像这样添加它：

angular.json

步骤 3

在此步骤中，我们将安装 Ng Bootstrap。我们将安装 Ng Bootstrap 的包。为此，需要 Bootstrap UI。安装此包的命令如下：

步骤 4

在此步骤中，我们将导入模块。我们将使用 app.module.ts 文件来导入 ModuleOfNg。我们将把以下代码放入该文件中：

src/app/app.module.ts

步骤 5

在此步骤中，我们将更新视图文件。为此，我们将使用我们的 html 文件。我们将简单地创建 Bootstrap 模型的模板文件并放入以下代码：

src/app/app.component.html

步骤 6

在此步骤中，我们将使用组件 ts 文件。我们将创建 Bootstrap 模型的打开和关闭函数，并编写它的代码，如下所述：

src/app/app.component.ts

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

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