Angular 13搭配Bootstrap 5如何编程式打开modal弹窗

你遇到的模块找不到报错，本质是只装了@types/bootstrap类型包、没装bootstrap npm依赖，但你本身走CDN引入资源，完全不需要走ES模块导入，也不用引入ng-bootstrap、不用写隐藏按钮模拟点击的hack逻辑，直接用全局挂载的bootstrap原生API就能实现带动画的弹窗控制。

具体实现步骤 #

1. 解决TS类型识别问题 #

CDN引入的Bootstrap会把bootstrap对象挂到全局window上，直接调用TS会报变量未定义的错，两种处理方式选一个就行：

• 简单处理：直接在用到Modal的组件顶部加声明

declare const bootstrap: any;

• 要保留VS Code类型提示的话，加类型引用即可：

/// <reference types="@types/bootstrap" />
declare const bootstrap: typeof import('bootstrap');

不要写import { Modal } from 'bootstrap'这类导入语句，这就是你之前ng serve报模块找不到错误的直接原因——Angular会去node_modules里找bootstrap包，你没装npm版bootstrap自然会报错。

2. 模板层准备 #

给Modal根DOM加Angular模板引用变量，方便获取DOM实例，其他结构和Bootstrap官方示例完全一致即可：

<div class="modal fade" #demoModal tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">弹窗标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        业务自定义弹窗内容
      </div>
    </div>
  </div>
</div>

3. 组件逻辑层编写 #

通过@ViewChild拿到Modal DOM元素，初始化Modal实例后，直接调用原生的show()/hide()方法即可控制显隐，所有内置下滑动画、遮罩交互、ESC/点击背景关闭的能力都和原生属性触发完全一致：

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
/// <reference types="@types/bootstrap" />
declare const bootstrap: typeof import('bootstrap');

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent implements AfterViewInit {
  @ViewChild('demoModal') modalDom!: ElementRef<HTMLElement>;
  private modalIns?: bootstrap.Modal;

  ngAfterViewInit(): void {
    // 视图渲染完成后初始化弹窗实例，可传入官方支持的所有配置项
    this.modalIns = new bootstrap.Modal(this.modalDom.nativeElement, {
      backdrop: true,
      keyboard: true,
      focus: true
    });
  }

  // 业务逻辑里需要打开弹窗就调用这个方法
  openModal(): void {
    this.modalIns?.show();
  }

  // 需要关闭弹窗调用这个方法
  closeModal(): void {
    this.modalIns?.hide();
  }
}

补充说明 #

• 这种实现完全基于你已经通过CDN加载的Bootstrap 5原生能力，不需要额外引入第三方组件库，不会增加额外包体积
• 所有弹窗动画、交互行为和官方用data-bs-toggle属性触发的效果完全一致，不需要自己写display样式控制显隐
• 如果后续你想把CDN引入换成npm管理依赖，只需要执行npm install bootstrap，在angular.json里配置好对应的CSS、JS路径，把之前的全局声明删掉换成正常的import语句即可，业务逻辑不需要改动

内容的提问来源于stack exchange，提问作者Theo Stefou