如何在Angular 9/8中制作一个Bootstrap模式弹出窗口

在这篇文章中，我们将看到如何在Angular应用程序中使用bootstrap的模态弹出组件。在我们的Angular项目中添加bootstrap是一个简单的过程。模态对话框可以用来限制用户在回到正常使用应用程序之前执行特定的操作。例如，如果用户想访问一些应用程序，那么他们必须在访问整个应用程序之前登录到该应用程序，而我们不想让用户直接访问该应用程序或任何网站。在这里，模态窗口/弹出窗口可以是一个有用的东西，用来限制做一些改变。随着我们在这篇文章中的成长，我们将能够建立我们自己的模态弹出窗口。

如果你想使用NgbModal模块使用bootstrap和Angular打开弹出窗口，那么请参考如何使用Angular和Bootstrap打开弹出窗口？
我们将按照以下步骤来做这个项目。

第1步：使用以下命令安装bootstrap。为了使用bootstrap，首先，我们需要使用下面的语法将其安装到我们的工作区。node包管理器可以帮助我们安装项目中需要的各种包。

npm install bootstrap

第2步：在style.css文件中包含以下一行。在我们的项目中打开src/styles.css文件，并导入bootstrap.css文件****，加入以下一行代码。这种添加bootstrap的方法取代了我们在Angular 6中通常遵循的方法。因此，我们不需要明确地将该文件添加到angular.json文件的styles数组或index.html文件中。

@import '~bootstrap/dist/css/bootstrap.min.css';

第3步：在应用程序的app.component.html文件中包含以下代码。在你的app.component.html文件中加入下面的代码。这将有助于我们渲染组件类的内容。

<h3>Please click on the below button open popup</h3>
<hr />
<button
  style="margin: 50px; padding: 10px"
  type="button"
  class="btn btn-primary"
  (click)="openPopup()">Show Data
</button>
<div
  class="modal"
  tabindex="-1"
  role="dialog"
  [ngStyle]="{'display':displayStyle}">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">GeeksForGeeks</h4>
      </div>
      <div class="modal-body">
        One Stop Solution for all CS problems
  
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" 
                (click)="closePopup()">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

第4步：在应用程序的app.component.ts文件中包含以下代码。这个ts文件将帮助我们把数据从组件类转移到视图模板，即HTML模板。

import { Component, OnInit } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  constructor() {}
  
  ngOnInit() {}
  
  displayStyle = "none";
  
  openPopup() {
    this.displayStyle = "block";
  }
  closePopup() {
    this.displayStyle = "none";
  }
}

第5步：现在运行下面的命令来启动应用程序。这个命令将开始转译项目并显示下面的输出。