Angular 2 non aggiorna la vista dopo l'eccezione Viene generata

Question

Quando un'eccezione viene catturata dal gestore di eccezioni di Angular 2, l'interfaccia utente non viene più aggiornata. Ho un esempio molto semplice qui:

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

Il pulsante Esegui ribalta l'booleano che si riflette nel valore interpolato nel modello. Tuttavia, una volta premuto il pulsante Interrompi (in caso di errore da generare), il valore interpolato non viene più aggiornato quando viene premuto il pulsante "Esegui". Tuttavia, la console registra ancora i messaggi "Eseguendo".

Il problema ho a che fare è Vorrei creare un gestore di eccezioni personalizzato che avvisa l'utente e, eventualmente, non certo lavoro per cancellare una forma quando qualcosa è andato storto, ma quello che sto vedendo è che se mi passi un errore su un pulsante fai clic per testarlo, tutti gli aggiornamenti dell'interfaccia utente si interrompono. Tuttavia, i pulsanti continuano a funzionare, il che significa che tutti i pulsanti che inviano richieste lo faranno se il modulo è in buono stato. L'interfaccia utente tuttavia ha smesso di aggiornare e informare l'utente di ciò che sta accadendo.

Non sono sicuro se questo è un problema con Zone o altro, ma il tentativo di un NgZone.run() non sembra risolvere il problema per me. Se si intende un errore per interrompere l'interfaccia utente di un componente, qual è l'approccio corretto al mio problema?

Answer 1

Non fare affidamento sull'esecuzione del codice dopo un Exception non gestito. È necessario gestire l'eccezione nel punto in cui si prevede che si verifichi.

manipolazione

errore: http://www.javascriptkit.com/javatutors/trycatch.shtml

Answer 2

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

correzione (core): non si fermano rivelazione del cambiamento a causa di errori

• impedisce l'annullamento della sottoscrizione dalla zona in caso di errore
• impedisce l'annullamento della sottoscrizione dalla direttiva EventEmitter s su errore
• impedisce strappatori viste in modalità dev caso di errore
• assicura che ngOnInit viene chiamato solo 1x (anche in modalità prod)

dovrebbe funzionare senza ulteriore codice

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