使用 material2 小吃吧作为 angular2 的错误处理程序答案

【问题标题】：Use material2 snackbar as error handler for angular2使用 material2 小吃吧作为 angular2 的错误处理程序
【发布时间】：2017-03-28 03:22:21
【问题描述】：

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

异常：未捕获（承诺）：TypeError：无法读取未定义的属性“通知” TypeError：无法读取未定义的属性“通知”

这是我的捕手服务：

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');
  }
}

因此，当捕手而不是蛇形条出现错误时，我会在控制台中收到错误，即我的函数未定义。

谁能解释我的错误在哪里？提前致谢

【问题讨论】：

你试过了吗：.catch((err)=>{this.handleError(err);})？
哇！有用！如果你能解释一下，我很感激

标签： angular material-design

【解决方案1】：

您正在失去 .catch() 语句中的范围。当异步 .catch() 方法执行时，它会将自己的作用域附加到 this。

像这样使用箭头函数：

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

将确保您的范围通过异步方法调用得到维护，并且这些天使用 TS 的典型做法是避免this hell。

箭头函数语法使用“词法作用域”来确定this 的值应该是什么。词法作用域是一种奇特的说法，它使用来自周围代码的this。

如果您有兴趣阅读有关箭头函数和词法范围的更多信息，this is a good article。

值得注意的是this 值（内部）是实际上并没有绑定到箭头函数。中的正常功能 JavaScript 绑定了自己的 this 值，但是 this 中使用的值箭头函数实际上是从它所在的范围内按词法获取的里面。它没有this，所以当你使用它时，你正在与外部范围。

【讨论】：