TypeScript内の関数内でクラス関数にアクセスする

Question

私はアプリケーションでAngular 2でビルドしていますが、このTypeScriptのこのスコープを理解するにはまだ問題があります。

私は機能handleErrorのが401のステータスを受信SharedServiceと呼ばれる活字体クラスを、持っている、私はそれがログアウト（）を呼び出したいです。これはクラス内の関数でもあります。

Aは、私は以下の私の例で行ったように、私は矢印の関数定義を使用する必要がありますとの組み合わせで、このを関数を使用するためには、何らかの形でこれはまだ返す、という読み：

TypeError: this.logout is not a function(…)

は、あなたたちは知っていますか私が間違っていることは何ですか？

export class SharedService { 

    logout =() => { 
     console.log('Logout.'); 
    } 

    //This method catches any errors that might arise upon http requests 
    handleError(error: any) { 
     if (error.status === 401) { 
      this.logout(); <----------------------------- This returns the error 
     } 
     console.error(errMsg); // log to console instead 
    } 
} 

this.logout（）が呼び出されたときにエラーが発生します。

Answer 1

使用.bind(this)

logout() { 
    ... 
    return this._http.delete(url, options) 
     .map(res => res) 
     .catch(this.handleError.bind(this)); 

または矢印機能

logout() { 
    ... 
    return this._http.delete(url, options) 
     .map(res => res) 
     .catch((err) => this.handleError(err)); 

この場合の欠点は、パラメータが、これは.bind(this)有する必要はないが=>で繰り返される必要があることです。 コールバックがインラインで定義されている場合は、通常() =>が便利です。

Answer 2

はい。これは、typescriptがSharedService関数のためにlogoutを機能させるためです。

このような

：

//This method catches any errors that might arise upon http requests 
     SharedService.prototype.handleError = function (error) { 
      if (error.status === 401) { 
       this.logout(); 
      } 
      var errMsg = (error.message) ? error.message : 
       error.status ? error.status + " - " + error.statusText : 'Server error'; 
      console.error(errMsg); // log to console instead 
      return Observable.throw(errMsg); 
     }; 

と別のスコープにthis変更：それはプロトタイプに作るのです

function SharedService() { 
      var _this = this; 
      this.logout = function() { 
       console.log('Logout.'); 
       var headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); 
       var options = new RequestOptions({ headers: headers }); 
       var url = API_URL + 'users/sign_out.json'; 
       return _this._http.delete(url, options) 
        .map(function (res) { return res; }) 
        .catch(_this.handleError); 
      }; 
     } 

とhandleError。

ので、あなたが使用する必要がある必要があります：私はthis.logout（呼び出すとき .catch(() => this.handleError);