Угловые 2 частные переменные исчезают

Question

У меня есть следующий код, который является простой сервис, который возвращается на сервер, чтобы принести некоторые данные:

import { Injectable } from '@angular/core'; 
import { Action } from '../shared'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { Authenticated } from '../authenticated'; 
import 'rxjs/Rx'; 

@Injectable() 
export class ActionsService { 
    private url = 'http://localhost/api/actions'; 
    constructor(private http: Http, private authenticated : Authenticated) {} 

getActions(search:string): Observable<Action[]> { 
    let options = this.getOptions(false); 

    let queryString = `?page=1&size=10&search=${search}`; 
    return this.http.get(`${this.url + queryString}`, options) 
       .map(this.extractData) 
       .catch(this.handleError); 
} 

private extractData(response: Response) { 
    let body = response.json(); 
    return body || { }; 
} 

private handleError (error: any) {  
    let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';  
    console.error(errMsg); // log to console instead 

    if (error.status == 403) {    
     this.authenticated.logout(); 
    } 

    return Observable.throw(errMsg); 
}  

private getOptions(addContentType: boolean) : RequestOptions { 
    let headers = new Headers(); 
    if (addContentType) { 
     headers.append('Content-Type', 'application/json'); 
    } 

    let authToken = JSON.parse(localStorage.getItem('auth_token'));   
    headers.append('Authorization', `Bearer ${authToken.access_token}`); 

    return new RequestOptions({ headers: headers }); 
    } 
} 

Все работает, как ожидается, за исключением HandleError. Как только getActions получает сообщение об ошибке с сервера, он переходит в метод this.handleError, который снова работает отлично до тех пор, пока не будет вызван this.authenticated.logout(). this.autenticated undefined, и я не уверен, что это потому, что «это» относится к другому объекту или если локальные переменные ActionSerivce сделаны null, когда происходит исключение и исключение http. Аутентифицированная локальная переменная правильно вводится (я сделал console.log в конструкторе, и он был там).

Answer 1

Проблема в том, что вы не связываете контекст this в своей функции обратного вызова. Вы должны объявить http вызов, как это, например:

return this.http.get(`${this.url + queryString}`, options) 
       .map(this.extractData.bind(this)) //bind 
       .catch(this.handleError.bind(this)); //bind 

Другой вариант мог бы передать анонимную функцию и вызвать функцию обратного вызова оттуда:

return this.http.get(`${this.url + queryString}`, options) 
       .map((result) => { return this.extractData(result)}) 
       .catch((result) => { return this.handleError(result})); 

И еще один вариант, чтобы объявить функцию обратного вызова функционирует немного по-другому, вы можете сохранить свой http так, как он был у вас: