使用自定义错误处理程序捕获 Javascript 错误后，Angular/Angular2 数据绑定不起作用答案

【问题标题】：Angular/Angular2 data binding not working after catching Javascript error using custom errorhandler使用自定义错误处理程序捕获 Javascript 错误后，Angular/Angular2 数据绑定不起作用
【发布时间】：2017-08-06 13:40:03
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： angular typescript data-binding error-handling

【解决方案1】：

没有任何代码很难查明问题，但我认为object.showError 很可能是您的问题。

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

【讨论】：

目前我的布尔值不在对象内。我添加了一些代码来说明问题

【解决方案2】：

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

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

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

另见Angular 2: Custom ExceptionHandler Change Detection Lag

【讨论】：

为我工作。将 ApplicationRef 添加到我的组件中，并在切换我的详细错误时手动触发更改检测