如何在Angular中添加Bootstrap 5模态框

Question

我已经在index.html中引入了Bootstrap 5。

<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">

我尝试在我的 Angular 页面中使用 Bootstrap 文档中的示例代码，但它无法工作。

可能的原因是什么？是否有其他方法可以在 Angular 页面中使用模态框？

- kiran

---

尝试将CSS添加到angular.json中。 - TinsG

已在 angular.json 中添加，但仍未响应。 - kiran

好的，请尝试安装Bootstrap：npm i bootstrap。 - TinsG

Answer 1

在2021年，完美运作。

使用npm install --save bootstrap安装bootstrap。

在angular.json文件中设置路由到bootstrap的css和js。

在component.ts文件中。

import * as bootstrap from 'bootstrap';

  modalName: bootstrap.Modal | undefined
save(){
    this.testModal?.toggle()
  }
  openModal(element){
    this.testModal = new bootstrap.Modal(element,{} ) 
    this.testModal?.show()
  }

在组件的HTML文件中。

<button class="btn btn-primary" (click)="openModal(testModal)">Add dish</button>
    
<div class="modal" tabindex="-1" #testModal id="testModal"> ...</div>

- Artur O

---

非常有趣，您能否深入解释一下？我试图理解您的意思，但是在组件中编译器显示接口未正确实现。由于我找不到相关文档，从这篇文章中获得帮助将非常有用。 - Nik Rubblers

你的新boostrap.Modal需要一个元素。该元素是testModal，但testModal指向自身。这不会陷入循环吗？提前感谢您的解释。 - Jimmyt1988

Answer 2

const a = new (window as any).bootstrap.Modal(element);
 //a.toglle();
 //a.show();
 //a.hide();
 //a.dispose();

- bruno

---

虽然其他解决方案更加干净，但添加@types/bootstrap会导致问题。唯一的解决方法是使用这种访问bootstrap JavaScript代码的格式。请参见https://dev59.com/tqv2oIgBc1ULPQZFV4dw - Pierre

这个对我有用：const a = new (window as any).bootstrap.Modal("#exampleModal"); - Marc Guvenc

Answer 3

尝试在Angular中安装Bootstrap 5 npm install bootstrap@next，并使用Bootstrap 5模态框，它应该可以正常工作。 https://www.npmjs.com/package/bootstrap/v/5.0.0-alpha1

- Andrew Lubezki

Answer 4

在我们的项目终端中运行以下命令，将 Bootstrap 5 模块安装到我们的 Angular 应用程序中：

npm install bootstrap@next

将以下代码添加到 src/app/app.component.html 文件中，以在 Web 浏览器上获得最终输出：

  <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" 
  data-bs-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria- 
  labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-danger" id="exampleModalLabel">Hey 
      Bootstrap 5!!</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" 
       aria-label="Close"></button>
      </div>
      <div class="modal-body text-danger">
       Therichpost.com
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-bs- 
       dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

需要将以下代码添加到 angular.json 文件中：

    "styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              ...
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

- Gajanan

Answer 5

我尝试了很多其他答案，@Gajanan的答案是对我有效的。我为了未来的自己或其他可能遇到这个问题的人回答这个问题，实际上非常简单，可能在Bootstrap文档或Angular文档中有解释，这是一个tl;dr。

这是我使用的步骤：

1. 我使用cli从头开始一个新的Angular项目，使用scss和TypeScript。
2. 然后使用NPM下载了Bootstrap。
3. 然后将Bootstrap的.scss文件添加到默认的样式scss中。

在这之后，我的大脑认为一切都正确，因为Bootstrap样式加载正常。但是当我尝试使用模态框时，它却不起作用，所以我使用了@Gajanan的回答，它起作用了。

但是还要注意的是，要小心在哪里添加脚本，我把脚本添加到了其他地方，结果浪费了15分钟。

{
  ...
  "projects": {
    ...
    "myProject": {
      ...
      "architect": {
        ...
        "build": {
          ...
          "options": {
            ...
            "scripts": ["here "],
          },
          ...
          "test": {
            ...
            "options": {
              ...
              "scripts": ["NOT here"],
            }
          }
        }
      }
    }
  }
}

我知道...我知道...很明显，但我也遇到了这个问题，所以这是一种惩罚自己犯错的方式。

- Luis Alejandro Quiroga Gómez