使用material2 snackbar作为angular2的错误处理程序

Question

我正在尝试将material2中的snackbar设置为angular2服务的错误捕获器.在我看来,我做的一切都是正确的,但仍然出错

EXCEPTION:未捕获(在promise中):TypeError:无法读取未定义的属性'notify'TypeError:无法读取未定义的属性'notify'

这是我与捕手的服务:

import { Injectable } from '@angular/core';
import {Headers, Http, RequestOptions} from '@angular/http';

import 'rxjs/add/operator/toPromise';
import {Observable} from 'rxjs/Rx';
import {MdSnackBar, MdSnackBarConfig, MdSnackBarRef} from '@angular/material';

@Injectable()

export class AppServices {

  private api = 'app/endpoint';
  private headers = new Headers({ 'Content-Type': 'application/json' });
  private options = new RequestOptions({ headers: this.headers });

  constructor(
    private http: Http,
    private snackbar: MdSnackBar
  ) { }

  getConfigs(): Promise<any> {
    return this.http
      .get(this.api + "/confs")
      .toPromise()
      .then(response => response.json() as Array<Object>)
      .catch(this.handleError)
  }

  // ==============
  // errors handler
  // ==============

  notify (status: any, text: any) {
    this.snackbar.open(status, text, {
      duration: 3000
    });
  }

  public handleError(error: Response) {
    this.notify(error.status, error.statusText);
    return Observable.throw(error.json() || 'Server error');
  }
}

所以当catcher得到错误而不是snakebar时,我在控制台中得到错误,我的函数是未定义的.

有人可以解释一下我的错误在哪里吗？提前致谢

Answer 1

您在.catch()声明中失去了范围.当异步 .catch()方法执行时,它将自己的范围附加到this.

使用箭头函数如下:

.catch((err)=>{this.handleError(err);})

将确保通过异步方法调用来维护您的作用域,并且这些天使用TS通常是很好的做法以避免this地狱.

箭头函数语法使用"词法范围"来确定this应该是什么值.词汇范围是一种奇特的方式,说它使用this周围的代码.

如果您有兴趣阅读有关箭头函数和词汇范围的更多信息,这是一篇很好的文章.

值得注意的是,this值(内部)实际上并未绑定到箭头函数.JavaScript中的普通函数绑定它们自己的this值,但是this箭头函数中使用的值实际上是从它所在的范围内以词法方式获取的.它没有this,所以当你使用它时,你正在与外部范围交谈.