角度模态并不总是正确显示

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));