如何在 Angular 9/8 中制作引导模式弹出窗口？

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

如果您想使用 NgbModal 模块使用 bootstrap 和 Angular 打开弹出窗口，请参阅如何使用 Angular 和 Bootstrap 打开弹出窗口？
我们将按照以下步骤制作这个项目。

第 1 步：使用以下命令安装引导程序。为了使用引导程序，首先，我们需要使用以下语法将其安装在我们的工作区中。节点包管理器方便我们安装项目中需要的各种包。

npm install bootstrap

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

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

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

app.component.html

Please click on the below button open popup



  
    
      
        GeeksForGeeks
      
      
        One Stop Solution for all CS problems

app.component.ts

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";
  }
}

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

app.component.ts

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 步：现在运行以下命令来启动应用程序。此命令将开始编译项目并显示以下输出。

ng serve --open

输出：