angular2中的可观察和依赖注入答案

【问题标题】：Observable and dependency injection in angular2angular2中的可观察和依赖注入
【发布时间】：2017-01-11 06:51:05
【问题描述】：

我有这样的服务：

@Injectable()
export class AuthService {

    private contentHeader: Headers = new Headers({"Content-Type": "application/json", "Accept": "application/json"});   

    constructor(public events: Events, private authHttp: AuthHttp){

    }

    public get(url): Observable<any> {            
        return this.authHttp.get(url, { headers: this.contentHeader })
            .map(this.extractData)
            .catch(this.handleError);
    }


    public extractData(res: Response) {
        try {
            let body = res.json();
            return body || {};
        }
        catch (e) {
            return {};
        }
    }

    public handleError(error: any) {
        if (error.status == 401 || error.status == 403)
        {
            // injected
            this.events.publish('user:logout');
        }

        return Observable.throw(error);
    }

}

this.events 在 handleError 中不起作用并在控制台中触发此错误：EXCEPTION: TypeError: this.events is undefined

如何在可观察的地图和捕获部分中使用依赖注入的服务？

【问题讨论】：

标签： angular typescript ionic2

【解决方案1】：

你需要使用箭头函数来保留上下文

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

或

public handleError = (error: any) => {
  ...  
}

或者使用bind方法

.catch(this.handleError.bind(this));

在此处查看有关 lexical this 的更多详细信息：

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this

【讨论】：