2016-11-13 2 views
1

編集:TypeScript、Angular 1.x:ラムダ関数はプロパティの解決にどのように影響しますか?

私は問題を解決できましたが、その理由はわかりません。そこで、私は今どこに立っているかを反映するようにこの質問を修正しました。私は参照のために古い質問を残しています。

新しい質問:

は古いスタイルの関数にラムダ関数を変更するには、TSコンパイラが$stateのプロパティを見つけることができませんでした問題を修正しました。なぜこれが当てはまるのかわかりません。ですから、今私の質問は...

ラムダ関数はプロパティの解決にどのように影響しますか?

ラムダと旧式の関数を使用するタイミングはどうやって判断できますか?古い形式の関数に戻すことにより、

固定資産解像度:BELOW

enter image description here

OLD QUESTION:

タイトル:活字体、角度の1.x:$のstate.goはありません存在しません - 同じファイル内の他の場所でも同じです

私はAngular 1.5 app f romバニラJSからTypeScriptへ私は$stateの両方のメソッドgoが存在し、同じクラス内に存在しないという奇妙な問題に遭遇しています。

(下の画像で見ることは困難であるが、コンパイラは、プロパティが存在しないと考えているため第二this.$state.goに、goは赤下線を持っていることに気づくことができる)

enter image description here

こちらフルクラス:

export class LogoutAndInfoController implements ILogoutAndInfo { 
    public memberInfo: Object; 
    static $inject = [ 
     '$http', '$state', 'AuthService', 'API_ENDPOINT', 'UserInfoService' 
    ]; 

    constructor(private $http: angular.IHttpService, private $state: angular.ui.IStateProvider, 
    private AuthService: AuthService, private API_ENDPOINT: IAPI_ENDPOINT, private UserInfoService: UserInfoService) { 
     this.memberInfo = {}; 
    } 

    destroySession(): void { 
     this.AuthService.logout(); 
    } 

    getInfo(): void { 
     this.$http.get(this.API_ENDPOINT["url"] + '/memberinfo').then(function (result) { 
      this.memberInfo = result.data["user"]; 
      this.$state.go('login'); 
     }); 
    } 

    logout(): void { 
     this.AuthService.logout().then((result: any) => { 
      this.UserInfoService.resetUser(); 
      this.$state.go('login'); 
     }); 
    } 
} 

私はAngularフレームワーク内でTSとTSの両方に非常に新しいです。だから、私たちがデバッグする前に見なければならない他のコードがあるかどうか教えてください。

答えて

2

実際にはthisが演技しています...あなたが使用している可能性のある他のほとんどの言語に比べて、Javascriptでは奇妙なことです。

最初の例では、$http.get()を呼び出します。 thisがJSでどのように動作するかによって、get()関数が呼び出され、thisはこの場合にはthis.$httpに設定されます。これはファンキーな気持ちが始まるところです。 thisは、オブジェクトに対してメソッドを呼び出すときにのみ設定され、新しい関数が呼び出されたときも同じままになります。つまり、$http.get()がコールバックを呼び出すと、thisはまだ$httpに設定されているため、$stateは存在しません。

この理由で、var self = this;のパターンがすべての場所に表示されます。

var self = this; 
this.$http.get(..., function() { 
    self.$state.go() 
}); 

ラムダ関数は、他の一方で、別々にバインドします。それはあなたが知っているthisに結合し、そううまくいく次持つことができます。いわゆる「矢印関数」は独自のthisコンテキストを持たないため、作成された関数内のthisを閉じるため、期待通りに機能します。

さらに源:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

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

関連する問題