Angular Modal 并不总是正确显示

Question

我们在 Angular 4 应用程序中实现了自定义错误处理，它会覆盖默认的 ErrorHandler 并显示带有错误的模式：

@Injectable()
export class GlobalErrorCatcherService implements ErrorHandler {
  constructor(private errorDispatcherService: ErrorDispatcherService) { }

  public handleError(error: Error) {
    this.errorDispatcherService.dispatchError(error);
  }
}

跳过一些步骤，我们就有了一个 ErrorDisplayService，它获取有关错误的信息并显示一个 NgbModal，它是来自 @ng-bootstrap 框架的组件：

@Injectable()
export class ErrorDisplayService {
  constructor(private modalService: NgbModal) {
  }

  public showError(errorInformation: ErrorInformation): void {
    const options = <NgbModalOptions>{
      backdrop: 'static',
      keyboard: true
    };

    const modalRef = this.modalService.open(ErrorDisplayContentComponent, options);
    const componentInstance = <ErrorDisplayContentComponent>modalRef.componentInstance;
    componentInstance.initialize(errorInformation);
  }
}

不幸的是，这只有一半的时间有效：预期的结果有时是正确的，例如：

但更多时候，我们得到的结果是这样的：

到目前为止，我所有的修补都不起作用，我无法确定问题所在。我是否还有进一步的可能性可以尝试使这项工作成功？

Answer 1

我决定以类似的方式实现错误处理程序并面临同样的问题。通过使用调试器，我发现handleError()函数是由外部的角度调用的Zone，所以我认为这可能是无法正确渲染的原因NgbModalWindow。

我的解决方案是在角度内打开模态zone。这很有帮助。

尝试这个：

1. 注入到您的ErrorHandler实现中NgZone。（private zone: NgZone进入构造函数）或与injector.
2. 将你包裹this.errorDispatcherService.dispatchError(error);成zone.run(() => this.errorDispatcherService.dispatchError(error));