Angular项目中Bootstrap Modal无法正常显示问题求助

1. 确认Bootstrap及依赖已正确安装并配置 #

Bootstrap 5依赖Popper.js实现模态框等组件的交互逻辑，先确保安装必要依赖包：

npm install bootstrap @popperjs/core

接着在angular.json中导入Bootstrap的CSS和JS资源：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/@popperjs/core/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        }
      }
    }
  }
}

2. 手动初始化动态生成的模态框 #

Angular的*ngIf会动态添加/移除DOM元素，Bootstrap的自动初始化机制无法捕获这类动态元素，需要手动实例化模态框：

组件TS代码：

import { Component, ElementRef, ViewChild, AfterViewChecked } from '@angular/core';
import Modal from 'bootstrap/js/dist/modal';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements AfterViewChecked {
  @ViewChild('modalRef') modalElement!: ElementRef;
  showmodal = false;
  private modalInstance: Modal | null = null;

  ngAfterViewChecked(): void {
    // 显示模态框：当标记为显示且实例未创建时，初始化并展示
    if (this.showmodal && !this.modalInstance) {
      this.modalInstance = new Modal(this.modalElement.nativeElement);
      this.modalInstance.show();
    } 
    // 隐藏模态框：当标记为隐藏且实例存在时，销毁实例
    else if (!this.showmodal && this.modalInstance) {
      this.modalInstance.hide();
      this.modalInstance = null;
    }
  }

  // 示例：触发模态框显示的方法（可绑定到按钮点击事件）
  openModal(): void {
    this.showmodal = true;
  }
}

模板HTML修改：

给模态框根元素添加模板引用变量#modalRef：

<div #modalRef class="modal fade text-center" *ngIf="showmodal" tabindex="-1" id="withScrollExampleModal">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title fw-normal">Basic dialogue title</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <i class="fa-light fa-circle-xmark"></i>
        </button>
      </div>
      <div class="modal-body f-14">
        <p>Lorem ipsum dolor sit amet consectetur. Enim libero commodo nibh vitae sed laoreet magna dui pharetra.</p>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Action 1</button>
        <button type="button" class="btn btn-outline-primary rounded-pill">Action 2</button>
      </div>
    </div>
  </div>
</div>

3. 更适配Angular的替代方案：使用ng-bootstrap #

如果不想手动处理Bootstrap JS的初始化逻辑，可以使用官方维护的Angular封装库ng-bootstrap，它完全适配Angular生命周期，无需引入Bootstrap的JS文件：

npm install @ng-bootstrap/ng-bootstrap bootstrap

在AppModule中导入NgbModule：

import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule]
})
export class AppModule { }

之后可直接使用ng-bootstrap提供的模态框组件，按官方规范编写代码即可。

内容的提问来源于stack exchange，提问作者Shehzad Hussain