网站搜索

typescript - Angular 2:获取组件内的所有应用错误


目标

在自定义的 Angular 异常处理器中捕获应用程序的每一个错误,然后在组件模板中向用户显示这些错误。

问题

应用程序组件正确地订阅了异常处理程序,异常处理程序也正确地触发了事件,但回调函数从未被调用(在这种情况下为 error=>this.errorMessage=error.message)。

main.ts

@Injector();
class MyExceptionHandler implements ExceptionHandler {
  errorOccured: EventEmitter<{}> = new EventEmitter(); 

  call(error, stackTrace = null, reason = null) {
    errorOccured.emit(error);
  }
}
bootstrap(MyAppComponent, {provide: ExceptionHandler, useClass: MyExceptionHandler}])

app.component.ts

 import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: `
          <p *ngIf="errorMessage">{{errorMessage}}</p>
          <button (click)="triggerError()">Trigger Error></button>`
    })
    export class AppComponent { 
        errorMessage: string;

        constructor(private errorHandler: MyExceptionHandler ) {
            this.errorHandler.errorOccured
                .subscribe(error => this.errorMessage = error.message)
        }

        triggerError() {
            throw new Error('some error');
        }
    }