Angular 2 не обновляет вид после возникновения исключения
Когда исключение перехватывается обработчиком исключений Angular 2, пользовательский интерфейс больше не "обновляется".
У меня есть очень простой пример здесь:
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));
Ответы
Ответ 1
Так как angular 4.1.1 (2017-05-04) https://github.com/angular/angular/commit/07cef36
fix (core): не останавливать обнаружение изменений из-за ошибок
- предотвращает отмену подписки из зоны при ошибке
- предотвращает отмену подписки на директиву
EventEmitter
при ошибке - предотвращает снятие просмотров в режиме dev, если есть ошибка
- гарантирует, что
ngOnInit
вызывается только 1x (также в режиме prod)
он должен работать без дополнительного кода
@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')
}
}
Пример плунжера
Ответ 2
Не полагайтесь на выполнение кода после того, как произошел необработанный Exception
.
Вы должны обрабатывать исключение в том месте, где вы ожидаете, что это произойдет.
Обработка ошибок:
http://www.javascriptkit.com/javatutors/trycatch.shtml