Angular项目中Bootstrap模态框无法生效，使用[ngStyle]也无效如何解决？

• 你当前使用的是原生Bootstrap的模态框触发逻辑，依赖jQuery和Bootstrap自带的JS脚本，Angular项目默认不会引入jQuery，且原生JS的DOM监听逻辑和Angular的组件生命周期、变更检测机制不兼容，所以data-toggle、data-dismiss这类属性触发模态框的方式不会生效。
• 你尝试的[ngStyle]绑定语法错误，正确的写法应为[ngStyle]="{'display': displayValue}"。且即便语法修正，Bootstrap模态框还有淡入淡出过渡、body添加modal-open类、背景遮罩层生成等配套逻辑，仅修改display属性无法让模态框完整正常工作。

推荐解决方案：使用Angular适配的Bootstrap组件库 #

无需依赖jQuery，完全适配Angular的生命周期和变更检测机制，操作步骤如下：

1. 安装和你Angular版本匹配的ng-bootstrap包，之后在对应业务模块的imports数组中引入NgbModalModule
2. 调整代码逻辑，通过Angular服务调用的方式控制模态框开关，示例代码如下：
   组件ts代码：

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 原有组件配置
})
export class YourComponent {
  constructor(private modalService: NgbModal) {}

  openModal(content: any) {
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' });
  }
}

模板代码调整：

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" (click)="openModal(exampleModal)">
  Launch demo modal
</button>

<!-- 模态框模板 -->
<ng-template #exampleModal let-modal>
  <div class="modal-header">
    <h5 class="modal-title" id="modal-basic-title">Modal title</h5>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modal.close('Save click')">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</ng-template>

临时解决方案（不推荐，依赖jQuery） #

如果要沿用原生Bootstrap的模态框代码，可按以下方式调整：

1. 在angular.json的scripts配置项中，按顺序引入jQuery、Bootstrap的JS文件路径
2. 在组件中声明全局$对象，通过jQuery方法控制模态框开关，示例代码如下：

declare var $: any;

// 打开模态框方法
openModal() {
  $('#exampleModal').modal('show');
}
// 关闭模态框方法
closeModal() {
  $('#exampleModal').modal('hide');
}

模板中删除原有data-toggle、data-target属性，给触发按钮添加点击事件(click)="openModal()"即可生效。

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