如何在 Angular 中添加 bootstrap 5 模态

Question

我已将 bootstrap 5 包含在 index.html 中

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

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

可能是什么原因，还有另一种方法可以在角度页面内使用模式吗？

Answer 1

2021年运作完美，

安装引导程序npm install --save 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()
  }

在 component.html 文件中

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