使用自定义错误处理程序捕获Javascript错误后，Angular / Angular2数据绑定无法正常工作

Question

我正在使用Angular 2.4.9并实现了一个自定义错误处理程序，它只捕获所有错误并导航到错误路由以显示消息。

我有一个切换按钮来显示/隐藏绑定到布尔值的详细消息（也尝试了一个对象中的布尔值，即object.showError）如果我捕获Http错误并自己抛出错误，所有工作正常。 但是，如果我遇到像ViewWrappedError这样的Angular错误，数据绑定就会拒绝工作。 （点击）evets仍然是函数，布尔值从true切换到false，只是更改没有反映在页面上。

我错过了一些让它起作用的东西吗？

import { Component } from '@angular/core';
import { ErrorService } from './error.service';
import { Error } from './index';

@Component({
  moduleId: module.id,
  selector: 'error',
  templateUrl: 'error.component.html',
  styleUrls: ['error.component.css']
})

export class ErrorComponent {

  public error: Error;
  public showDetailedError: boolean;

  constructor(private errorService: ErrorService) {
    this.showDetailedError = false;
    this.error = this.errorService.getError();
  }
}

HTML模板

<div class="error-container">
  <h1>Sorry, something went wrong.</h1>
  <p class="error-message">An error occurred while processing your request.  Details on this error can be found below.</p>
</div>
  <p *ngIf="!showDetailedError" (click)="showDetailedError = !showDetailedError" class="info-icon">Click for detailed description</p>
</div>

Answer 1

没有任何代码很难确定问题，但我认为object.showError很可能是你的问题。

角度变化检测知道组件属性，但不知道复杂对象内部，特别是当它存在于数组对象中时。 尝试移动该标志或使用getter函数绑定它。

Answer 2

您可以尝试调用更改检测：

@Injectable()
class MyExceptionHandler implements ExceptionHandler {
  constructor(private appRef:ApplicationRef) {}
  call(error, stackTrace = null, reason = null) {
    // do something with the exception
    this.appRef.tick();
  }
}

在更改检测期间发生异常时，Angular会在ErrorHandler处理后继续更改检测。 明确地调用它可能会有所帮助。 我没有尝试过自己。
我不认为在异常后继续使用应用程序是安全的。 自定义错误处理程序主要是一种报告异常的方法（例如，在服务器日志中），以便您可以在源中修复原因。

另请参见Angular 2：自定义ExceptionHandler更改检测延迟