Question

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

EXCEPTION：Uncaught（在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 is a good article。

值得注意的是，this值（内部）是实际上并没有绑定箭头功能。正常功能 JavaScript会绑定自己的this值，但会使用this值箭头函数实际上是从它所在的范围内词汇提取的内。它没有this，所以当你使用它时，你正在与之交谈外部范围。

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

1 个答案: