Ich versuche ein benutzerdefiniertes @ zu implementierExceptionHandler in einer Angular 2-App, die nicht erfasste Fehler an ein benutzerdefiniertes @ sendAlertsService. Das Ziel ist es, das Haupt @ zu ermöglichApp -Komponente, um die von @ bereitgestellten Warnungen zu abonniereAlertsService, damit die Fehler in der Benutzeroberfläche angezeigt werden.

Das Problem, das ich sehe, ist, dass Fehler an die @ gesendAlertsService durch die benutzerdefinierteExceptionHandler wird erst in der Benutzeroberfläche angezeigt, wenn ein anderer Fehler auftritt. Dies bewirkt, dass die Benutzeroberfläche immer eine Warnung hinter dem ist, was tatsächlich vom @ bereitgestellt wirAlertsService.

Meine Vermutung ist, dass dieses Verhalten etwas mit der Änderungserkennung und dem Sonderfall des ExceptionHandlers zu tun hat, aber ich bin nicht sicher, wohin ich von hier aus gehen soll. Wenden Sie sich an die Angular2-Experten, um Hilfe zu erhalten!

Beispielcode unten, hier klicken: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));