Bootstrap 4.3.1 Modal与Angular 8集成异常求助

我之前在 Angular 8 项目里用 Bootstrap 4.3.1 的 Modal 时，遇到过和你完全一样的问题——直接抄了官网的演示代码，控制台没任何报错，但点击按钮就是弹不出 Modal，查了一堆帖子都没解决，折腾了好一阵才找到根源！

先给你还原下我当时排查出来的几个常见坑，应该就是你解决时碰到的情况：

可能的问题及解决步骤 #

1. 没正确引入 Bootstrap 依赖的 JavaScript 文件 #

Bootstrap 的 Modal 功能依赖 jQuery 和 Popper.js，光引入 CSS 是没用的，必须确保这两个依赖都装了，并且在 Angular 配置里正确加载：

• 先安装依赖：

  npm install jquery popper.js bootstrap@4.3.1
  

• 打开 angular.json，在 architect -> build -> options -> scripts 数组里添加这三个文件的路径：

  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]
  

2. Angular 的 DOM 机制和 Bootstrap 原生属性冲突 #

Angular 有自己的变更检测和 DOM 渲染逻辑，直接用 Bootstrap 官网的 data-toggle、data-target 这些原生属性，有时候会因为 DOM 还没完全渲染好，导致事件绑定失败。这时候可以改用手动触发的方式：
比如在组件里用 jQuery 手动初始化并控制 Modal：

import { AfterViewInit, Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 初始化 Modal
    $('#exampleModal').modal({
      backdrop: 'static',
      keyboard: false
    });

    // 绑定按钮点击事件手动打开 Modal
    document.querySelector('[data-target="#exampleModal"]')?.addEventListener('click', () => {
      $('#exampleModal').modal('show');
    });
  }
}

或者更 Angular 风格的，用 ViewChild 获取元素：

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('exampleModal') exampleModal!: ElementRef;

  ngAfterViewInit(): void {
    $(this.exampleModal.nativeElement).modal({
      backdrop: 'static',
      keyboard: false
    });
  }

  openModal(): void {
    $(this.exampleModal.nativeElement).modal('show');
  }
}

对应的 HTML 改成：

<button type="button" (click)="openModal()" class="btn btn-primary">Open Modal</button>

<div class="modal fade" #exampleModal tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

3. 多余的 in 类导致样式冲突 #

你代码里的 Modal 加了 fade in 类，Bootstrap 4 里 fade 类已经包含了过渡动画，额外加 in 可能会导致 Modal 初始化时的样式异常，建议去掉 in，只保留 fade。

看你已经解决了问题，应该就是踩了上面某一个坑～ 希望这些步骤能帮到其他遇到同样问题的开发者！

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