如何在 Angular 中添加 bootstrap 5 模态答案

【问题标题】：How to add bootstrap 5 modal in Angular如何在 Angular 中添加 bootstrap 5 模态
【发布时间】：2023-04-06 06:54:01
【问题描述】：

我在 index.html 中包含了 bootstrap 5

&lt;link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;

我厌倦了使用 Bootstrap 文档中的示例代码，在我的角度页面中，它不起作用。

可能是什么原因，有没有另一种方法可以在角度页面中使用模态？

【问题讨论】：

尝试在angular.json中添加css
添加到 angular.json 中仍然没有响应
好的尝试安装引导程序npm i bootstrap

标签： html css angular bootstrap-5

【解决方案1】：

2021年完美运行，

使用npm install --save bootstrap 安装引导程序

在angular.json 文件中设置引导 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()
  }

在component.html文件中

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

【讨论】：

很有意思，能不能详细解释一下？我试图理解你的意思，但是在一个组件中，编译器说接口没有正确实现。因为我找不到合适的文档，所以从这篇文章中获得帮助会非常有用

【解决方案2】：

尝试以角度安装 bootstrap 5 npm install bootstrap@next 并使用 bootstrap 5 Modal，它应该可以工作 https://www.npmjs.com/package/bootstrap/v/5.0.0-alpha1

【讨论】：

【解决方案3】：

在我们的项目终端中运行以下命令，将引导 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"
           ]

【讨论】：

【解决方案4】：

我尝试了许多其他答案，@Gajanan 的答案对我有用。我为未来的我或可能遇到此问题的其他人回答这个问题，它实际上非常简单，可能会在 Boostrap 文档或 Angular 文档中进行解释，这是一个 tl;dr.

这是我使用的过程：

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

在这之后，我的僧侣大脑认为一切都是正确的，因为 Bootstrap 样式加载正常。但是后来我尝试使用模态，但它不起作用，所以我使用了@Gajanan 响应并且它起作用了。

但我必须补充一点。小心你添加脚本的地方，我在别处添加了脚本，我扔了大约 15 分钟到垃圾箱。

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

我知道...我知道...很明显，但我有这个问题，所以这是一种惩罚自己犯错误的方法。

【讨论】：

【解决方案5】：

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

【讨论】：