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

问题描述

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

I有一个切换按钮来显示/隐藏一个绑定到一个布尔值的详细消息（也尝试一个对象中的布尔值，即object.showError）如果捕获Http错误并自己抛出错误，所有工作都正确。但是，如果我遇到一个角度错误，如ViewWrappedError，数据绑定拒绝工作。 （点击）evets still功能，并且boolean从true切换到false，它的更改不会反映在页面上。

我错过了一些工作吗？

  import来自'@ angular / core'的{Component} 
 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; 
 
构造函数（private errorService：ErrorService）{
 this.showDetailedError = false; 
 this.error = this.errorService.getError（）; 
} 
} 
  

HTML模板

 < div class =error-container> 
< h1>对不起，出了问题。< / h1> 
< p class =error-message>处理您的请求时发生错误。有关此错误的详细信息，请参见下文。< / p> 
< / div> 
< p * ngIf =！showDetailedError（click）=showDetailedError =！showDetailedErrorclass =info-icon>点击详细说明< / p> 
< / div> 
  

解决方案

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

  @Injectable（）
 class MyExceptionHandler实现ExceptionHandler {
构造函数（private appRef：ApplicationRef）{} 
调用（错误，stackTrace = null，reason = null）{
 //执行异常
 this.appRef.tick（）; 
} 
} 
  

当变更检测发生异常时，在ErrorHandler处理它之后，继续更改检测。
明确调用它可能有帮助。我没有尝试过自己。

我不认为在异常之后继续使用应用程序是安全的。自定义错误处理程序主要是一种报告异常的方法（例如在服务器日志中），以便您可以修复源代码中的原因。

另请参见 Exception / b $ b

I'm using Angular 2.4.9 and have implemented a custom error handler which just catches all errors and navigates to an error route to display the message.

I have a toggle button to show/hide a detailed message which is bound to a boolean (also tried a boolean within an object i.e. object.showError) All works correctly if im catching Http errors and throwing an error myself. However if I encounter an Angular error such as ViewWrappedError the databinding refuses to work. (click) evets still function and the boolean is toggled from true to false its just the changes are not reflected on the page.

Am I missing something to get this to work?

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 Template

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

解决方案

You can try to invoke change detection:

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

When an exception happens during change detection, Angular doesn't continue change detection after the ErrorHandler handles it.Invoking it explicitly might help. I haven't tried myself though.
I don't think it's considered safe to continue working with the application after an exception. The custom error handler is mostly a way to report exceptions (for example in a server log) so that you can fix the cause in your source.

See also Angular 2: Custom ExceptionHandler Change Detection Lag

这篇关于在使用自定义错误处理程序捕获Javascript错误后，Angular / Angular2数据绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！