web-dev-qa-db-ja.com

Angular 2 call setInterval（）undefined Services form Dependency injection

setInterval（）を使用して10分ごとに関数を呼び出し、この関数ではAngularのDependency Injectorから取得するサービス（authと呼ばれる）を使用します。問題は、コンソールに次のように表示されることです。

例外：TypeError：this.authは未定義です

  constructor(private auth: AuthService){
    setInterval(function(){ this.auth.refreshToken(); }, 1000 * 60 * 10);
  }
typescriptangularsetinterval
21
Alex

this setIntervalに指定された関数では、呼び出されたときにクラスを指していません。

代わりに矢印関数を使用してください。

 constructor(private auth: AuthService){
    setInterval(() => { this.auth.refreshToken(); }, 1000 * 60 * 10);
  }
63
toskv

この問題の 詳細な説明 は、setInterval（）メソッドのドキュメントにキャプション付きで記載されています「この」問題 。ページの半分ほど下。

要点は、「this」変数の変更の結果であるということです。 setInterval（）関数に渡される関数は、クラスコンテキストから抽出され、setInterval（）（ウィンドウ）のコンテキストに配置されます。したがって、未定義です。

この問題にはいくつかの解決策があります。上記のtoskvによって提案された方法は、かなり一般的なアプローチです。別の解決策は、bind（）メソッドを使用することです。

constructor(private auth: AuthService) {
    setInterval(this.auth.refreshToken.bind(this), 1000 * 60 * 10);
}

この質問 からの参考資料、Pointyによる回答。

bind（）メソッド のドキュメント。

javascript scope の優れた記事。TypeScriptであなたに噛み付くことができます。

6
KhainTCore

それを解決するためのちょっとしたトリックがあります。お役に立てれば。

はじめに

const this1 = this;

それから

constructor(private auth: AuthService) {
    setInterval(this1.auth.refreshToken.bind(this), 1000 * 60 * 10);
}
0
Hayk Baghdasaryan