Angular 2: Задержка при обнаружении изменений в ExceptionHandler
Я пытаюсь реализовать кастомExceptionHandler
в приложении Angular 2, которое отправляет необработанные ошибки в пользовательскийAlertsService
, Цель состоит в том, чтобы основнойApp
компонент для подписки на оповещения, предоставленныеAlertsService
так что он может отображать ошибки в пользовательском интерфейсе.
Проблема, с которой я сталкиваюсь, заключается в том, чтоAlertsService
по обычаюExceptionHandler
не отображаются в пользовательском интерфейсе, пока не встретится другая ошибка. Это заставляет пользовательский интерфейс всегда быть одним предупреждением позади того, что фактически предоставляетсяAlertsService
.
Я предполагаю, что это поведение как-то связано с обнаружением изменений и особым случаем ExceptionHandler, но я не уверен, куда идти дальше. Глядя на помощь экспертов Angular2!
Пример кода ниже, вставьте сюда:https://plnkr.co/edit/xPoWCELA9IHqeLBS4wXs?p=preview
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;
}
@Injectable()
export class AlertsService {
private alertTriggeredSubject = new Subject<Alert>();
alertTriggered = this.alertTriggeredSubject.asObservable();
triggerAlert(message: string) {
this.alertTriggeredSubject.next(<Alert>{ message: message });
}
}
@Injectable()
export class CustomExceptionHander {
constructor(private alertsService: AlertsService) { }
call(exception, stackTrace = null, reason = null) {
this.alertsService.triggerAlert(exception.originalException);
console.error('EXCEPTION:', exception);
}
}
@Component({
selector: 'child-component',
template : `
<h3>Child</h3>
<div id="child">
<button (click)="breakMe()">Break Me!</button>
<div>Alerts Sent:</div>
<ul><li *ngFor="let error of errors">{{error}}</li></ul>
</div>`
})
export class ChildComponent {
errors: string[] = [];
numErrors = 0
breakMe() {
this.numErrors++;
let error = `I broke it (${this.numErrors})`;
// The error added to the array below is never reflected in the
// "Alerts Sent:" <ul>...not sure why
this.errors.push(error);
console.info('ChildComponent.errors', this.errors);
// Simulate unhandled exception
throw new Error(error);
}
}
@Component({
selector: 'my-app',
template : `
<h3>Parent</h3>
<div id="parent">
<div>Alerts Received:</div>
<ul><li *ngFor="let alert of alerts">{{alert.message}}</li></ul>
<child-component></child-component>
</div>`
directives: [ChildComponent]
})
export class App implements OnInit {
constructor(private alertsService: AlertsService) { }
alerts: Alert[] = [];
ngOnInit() {
this.alertsService.alertTriggered.subscribe(alert => {
this.alerts.push(alert);
// Alert gets received, but is not reflected in the UI
// until the next alert is received, even thought the
// alerts[] is up-to-date.
console.info('App alert received:', alert);
console.info('App.alerts:', this.alerts);
});
}
}
bootstrap(App, [
AlertsService,
provide(ExceptionHandler, { useClass: CustomExceptionHander })
]).catch(err => console.error(err));