html - 如何在 Angular 中添加 bootstrap 5 模态

Question

我在 index.html 中包含了 bootstrap 5

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

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

可能是什么原因，是否有另一种在 Angular 页面内使用模态的方法？

Answer 1

2021 年完美运行，

使用 npm install --save bootstrap 安装 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>