爲什麼我不能在rxjs .let（）操作中使用「this」關鍵字？

Question

我正在學習Typescript中的抽象類。 this關鍵字在本課程的每個方法中都能很好地工作，除了handleRetry。即使我試圖在該方法的頂部嘗試console.log(this.amiUrl)，它也會爆炸並告訴我它找不到它。

我已經嘗試刪除受保護的關鍵字，相信我誤解了它的使用。不用找了。

角4.3

打字稿2.4.1

import { HttpHeaders, HttpClient, HttpErrorResponse } from '@angular/common/http'; 
import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 

import { ToastsManager } from 'ng2-toastr/ng2-toastr'; 

import { Store } from '@ngrx/store'; 
import * as uiActions from '../../core/store/actions/ui.actions'; 
import * as fromRoot from '../../core/store/reducers'; 

import { environment } from '../../../environments/environment'; 

@Injectable() 
export abstract class RestService { 
    protected amiUrl = environment.api; 
    protected maxRetryAttempts = 3; 

    constructor (
    private http: HttpClient, 
    private store: Store<fromRoot.State>, 
    private toastr: ToastsManager) { } 

    private get headers(): HttpHeaders { 
    const headers: HttpHeaders = new HttpHeaders(); 
    headers.set('Authorization', 'Bearer ' + environment.accessToken); 
    return headers; 
    } 

    protected get(url: string) { 
    return this.http.get(this.amiUrl + url, { headers: this.headers }) 
     .let(this.handleRetry); 
    } 

    protected post(url: string, payload: any) { 
    return this.http.post(this.amiUrl + url, payload, { headers: this.headers }) 
     .let(this.handleRetry); 
    } 

    protected delete(url: string) { 
    return this.http.delete(this.amiUrl + url, { headers: this.headers }) 
     .let(this.handleRetry); 
    } 

    protected handleRetry<T>(source: Observable<T>): Observable<T> { 
    return source.retryWhen(e => 
     e.scan((errorCount, error) => { 
     if (errorCount >= this.maxRetryAttempts) { 
      this.store.dispatch(new uiActions.ClearRetryNotificationAction); 
      throw error; 
     } else { 
      this.store.dispatch(new uiActions.CreateRetryNotificationAction({ attempt: errorCount + 1, maxAttempts: this.maxRetryAttempts })) 
      return errorCount + 1; 
     } 
     }, 0) 
     .delay(2000)) 
    } 

    protected handleError(err: HttpErrorResponse, customMessage?: string) { 
    this.store.dispatch(new uiActions.CreateErrorNotificationAction(customMessage)); 

    console.log(err.error); 
    console.log(err.status); 
    console.log(err.name); 
    console.log(err.message); 

    if (!environment.production) { 
     this.toastr.error(customMessage); 
    } 

    return Observable.throw(err.message); 
    } 
} 

Answer 1

那是因爲你正在傳遞this.handleRetry作爲回調。
當調用回調時，範圍更改並且this不再引用RestService的實例。

爲了解決這個問題提供了四個選項：

（1）使用bind method：

... 
.let(this.handleRetry.bind(this)) 

（2）使用一個arrow function：

... 
.let(source => this.handleRetry(source)) 

（3）綁定方法在ctor中：

constructor (
    private http: HttpClient, 
    private store: Store<fromRoot.State>, 
    private toastr: ToastsManager) { 

    this.handleRetry = this.handleRetry.bind(this); 
} 

然後當你通過this.handleRetry它已經綁定到實例並且即使在被調用時也會保持這種狀態。

（4）使用箭頭功能，而不是一個方法：

handleRetry = <T>(source: Observable<T>): Observable<T> => { 
    ... 
} 

這將在實例創建類型函數的一個屬性，因爲它勢必有箭頭的功能。
雖然這不是一種方法，但它不會成爲原型的一部分，因此如果擴展該類，將不會繼承它。