Angular NgbModal闲置超时警告弹窗触发后不显示问题求助

问题根因 #

你的闲置监听逻辑通过NgZone.runOutsideAngular脱离了Angular的变更检测区域，调用ng-bootstrap弹窗打开方法时，仍处于变更检测区域外，弹窗的DOM更新无法被Angular感知，因此出现弹窗不显示、延迟加载的异常。

修复方案 #

1. 调整open()方法，将弹窗打开逻辑包入NgZone.run()中，手动切回Angular的变更检测区域即可：

open() {
  console.log("opening modal")
  this._ngZone.run(() => {
    this._modalService.open(this.sessionWarning, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
      this.sessionWarningDisplayed = false;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      this.sessionWarningDisplayed = false;
    });
  })
}

2. 额外修复代码笔误：当前isItTimeToShowPopUp方法中计算分钟的除数写为了13，属于错误取值，需要改为60才能正常计算剩余分钟：

this.minute = this.padZero(Math.floor(timeLeftForInactive / 60));
this.seconds = this.padZero(timeLeftForInactive % 60);

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