FusionCharts触发NgBootstrap模态框异常：show类未自动添加

问题现象 #

在Angular项目中，点击FusionCharts图表触发NgBootstrap模态框时，模态框元素已插入DOM但未自动添加show类；点击普通按钮触发则显示正常。手动设置windowClass和backdropClass为show仅窗口类生效，背景类仍无法添加。

问题根源 #

FusionCharts的chartClick事件是在Angular Zone上下文之外触发的，导致NgBootstrap初始化模态框时没有触发Angular的变更检测，无法自动为模态框和背景元素添加show类。

解决方案 #

方法1：用NgZone将操作包裹在Angular上下文内

在组件中注入NgZone，将打开模态框的逻辑放在zone.run()中，确保所有操作都处于Angular的变更检测范围内：

// app.component.ts
import { Component, NgZone } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { PlainModalComponent } from './plainmodal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dataSource: Object;

  constructor(
    private modalService: NgbModal,
    private zone: NgZone // 注入NgZone
  ) {
    // ...现有数据源初始化代码
  }

  plainModal() {
    this.modalService.open(PlainModalComponent);
  }

  chartClick() {
    // 将模态框打开逻辑包裹在zone.run中
    this.zone.run(() => {
      this.modalService.open(PlainModalComponent);
    });
  }
}

方法2：手动触发变更检测

如果不想依赖NgZone，可注入ChangeDetectorRef，在打开模态框后手动触发变更检测：

// app.component.ts
import { Component, ChangeDetectorRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { PlainModalComponent } from './plainmodal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dataSource: Object;

  constructor(
    private modalService: NgbModal,
    private cdr: ChangeDetectorRef // 注入ChangeDetectorRef
  ) {
    // ...现有数据源初始化代码
  }

  plainModal() {
    this.modalService.open(PlainModalComponent);
  }

  chartClick() {
    const modalRef = this.modalService.open(PlainModalComponent);
    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

说明 #

两种方法都能让NgBootstrap在Angular的变更检测流程中正确初始化模态框，自动为模态框和背景元素添加show类，无需手动设置样式类。优先推荐方法1，它能确保模态框的整个生命周期都处于Angular上下文内，避免其他潜在的变更检测问题。

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