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 的 Angular outside 调用的，所以我认为这可能是 NgbModalWindow 未正确呈现。

我的解决方案是打开模态 inside angular zone。这很有帮助。

试试这个:

1. 注入(inject)您的ErrorHandler 实现NgZone。 (private zone: NgZone into constructor)或使用injector。
2. 将您的 this.errorDispatcherService.dispatchError(error); 包装到 zone.run(() => this.errorDispatcherService.dispatchError(error));