从GlobalErrorHandler在Snackbar上显示错误消息

时间:2018-03-15 13:34:45

标签: angular angular-material2

我有一个要求,我需要使用角度材料在快餐栏中显示错误消息(如果它出现)。我编写了一个GlobalErrorhandler,它可以正常工作,只要在应用程序内发生任何错误就会被触发。

GlobalErrorHandler内部我正在尝试记录异常,我还需要使用MdSnackBar向用户显示错误消息。但是,当我将快餐栏参考添加到GlobalErrorHandler时,我将获得如下例外

Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1
    at NgModuleProviderAnalyzer.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleProviderAnalyzer.parse (compiler.es5.js:11805)
    at NgModuleCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleCompiler.compile (compiler.es5.js:18657)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModule (compiler.es5.js:26988)
    at compiler.es5.js:26933
    at Object.then (compiler.es5.js:1683)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26931)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26860)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522)
    at Object.../../../../../src/main.ts (main.ts:11)

我不明白这里的循环依赖是什么?为什么我无法在GlobalErrorHandler中实例化零食吧?

如果不是在错误处理程序中显示snackbar的正确方法,那么该问题的替代解决方案是什么,即在快餐栏中显示错误消息?

注意:应用程序内部发生的任何异常都应显示在snackbar

我的GlobalErrorHandler代码如下所示

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';
import * as StackTrace from 'stacktrace-js';
import { SessionService } from '../Services/SessionService';
import { MdSnackBar } from '@angular/material';

//import { Constants } from './Constants';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor(private injector: Injector,
    public snackBar: MdSnackBar,
    private _SessionService: SessionService)
  { }

  handleError(error) {
    debugger;
    const location = this.injector.get(LocationStrategy);
    const message = error.message ? error.message : error.toString();
    const url = location instanceof PathLocationStrategy
      ? location.path() : '';
    // get the stack trace, lets grab the last 10 stacks only
    StackTrace.fromError(error).then(stackframes => {
      debugger;
      const stackString = stackframes
        .splice(0, 20)
        .map(function (sf) {
          return sf.toString();
        }).join('\n');
      // log on the server
      console.log("_SessionService.loggedinuser " + this._SessionService.LoggedInUser);
      console.log("this._SessionService.LAST_API_URL : " + this._SessionService.LAST_API_URL);
      console.log("message : " + message);
      console.log("url : " + url);
      console.log("stack : " + stackString);

      this.snackBar.open("Error Occurred : " + message, "OK", {
        duration: this._SessionService.SnackbarTimer,
      });

    });
    throw error;
  }

}

0 个答案:

没有答案