角度2不会更新异常抛出后的视图 [英] Angular 2 Doesn't Update View After Exception Is Thrown

问题描述

当Angular 2的异常处理程序捕获到异常时，UI不再更新。我有一个非常简单的例子：

When an exception is caught by Angular 2's exception handler, the UI no longer 'updates'. I have a very simple example here:

https：// plnkr.co/edit/iHDYpZ3fDlO6bhOtlTbQ

import { Component, ExceptionHandler, Injectable, OnInit, provide } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { Subject } from 'rxjs/Subject'

export interface Alert {
  message: string;
}

@Component({
  selector: 'my-app',
  template : `
  <h3>Parent</h3>
  {{aValue}}
  <br/>
  <br/>
  <button (click)='doIt()'>do it</button>
  <br/>
  <br/>
  <button (click)='breakIt()'>break it</button>
  `
})

export class App implements OnInit {
  private aValue: boolean = true
  constructor() { }
  
  alerts: Alert[] = [];
  
  doIt(){
    console.log('Doing It')
    this.aValue = !this.aValue
  }
  
  breakIt(){
    console.log('Breaking It')
    throw new Error('some error')
  }
}

bootstrap(App).catch(err => console.error(err));

执行按钮翻转布尔值，反映在模板中的内插值中。但是，一旦按下Break It按钮（这种情况下会发生错误），当Do it按钮被击中时，内插值不再更新。但是，控制台仍然记录做它的消息。

The Do It button flips the boolean which is reflected in the interpolated value in the template. However, once the Break It button is pressed (which cases an error to be thrown), the interpolated value no longer updates when the 'Do it' button is hit. However, the console still logs the messages 'Doing it'.

我正在处理的问题是我要创建一个自定义异常处理程序，用于警告用户和可能有些工作可以在出现错误时清除表单，但是我看到的是，如果我在按钮上单击以测试错误，则所有UI更新都会停止。但是，按钮继续运行，意味着如果表单处于良好状态，则发出请求的任何按钮将会执行此操作。然而，UI已经不再更新，并通知用户发生了什么。

The problem I'm dealing with is I would like to create a custom exception handler that warns the user and possibly does some work to clear a form when something has gone wrong, but what I'm seeing is if I throw an error on a button click to test it, all UI updates stop. However, buttons continue to function, meaning any buttons that post requests will do so if the form is in a good state. The UI however has ceased to update and inform the user what is happening.

我不知道这是否是区域或其他问题，但尝试使用NgZone .run（）似乎没有为我解决问题。如果一个错误是为了打破组件的UI，那么我的问题是什么正确的方法？

I'm not sure if this is a problem with Zones or something else, but attempting an NgZone.run() didn't seem to solve the problem for me. If an error is meant to break a component's UI, what's the correct approach to my problem?

推荐答案

由于角4.1.1（ 2017-05-04） https://github.com/angular/angular/commit/07cef36

Since angular 4.1.1 (2017-05-04) https://github.com/angular/angular/commit/07cef36

修复（核心）：不要因为错误而停止更改检测

fix(core): don’t stop change detection because of errors

• 阻止从区域取消订阅错误


• 阻止从指令 EventEmitter 发生错误


• 如果错误


• 确保 ngOnInit 只有称为1x（也是在prod模式）

• prevents unsubscribing from the zone on error
• prevents unsubscribing from directive EventEmitters on error
• prevents detaching views in dev mode if there on error
• ensures that ngOnInit is only called 1x (also in prod mode)

它应该没有额外的代码工作

it should work without additional code

@Component({
  selector: 'my-app',
  template : `
    {{aValue}}
    <button (click)='doIt()'>do it</button>
    <button (click)='breakIt()'>break it</button>
  `
})

export class App implements OnInit {
  private aValue: boolean = true

  doIt(){
    console.log('Doing It')
    this.aValue = !this.aValue
  }

  breakIt(){
    console.log('Breaking It')
    throw new Error('some error')
  }
}

Plunker示例

Plunker Example

这篇关于角度2不会更新异常抛出后的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！