web-dev-qa-db-fra.com

Appel angulaire 2 appel setInterval () undefined Services sous injection de dépendance

Je veux appeler une fonction toutes les 10 minutes en utilisant setInterval () et dans cette fonction, je veux utiliser un service (appelé auth) que je reçois de l'injecteur de dépendance de Angular 2, le problème moi suivant: 

EXCEPTION: TypeError: this.auth n'est pas défini

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

this dans la fonction donnée à setInterval ne pointe pas vers la classe lorsqu'elle est appelée. 

Utilisez la fonction flèche à la place.

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

Vous trouverez un discussion complète de ce problème dans la documentation de la méthode setInterval (), sous-titrée Le problème "ce". À peu près au milieu de la page.

Le principe est qu'il résulte d'une modification de la variable "this". La fonction transmise à la fonction setInterval () est extraite du contexte de la classe et placée dans le contexte de setInterval () (la fenêtre). Donc, c'est indéfini.

Il existe plusieurs solutions à ce problème. La méthode proposée par toskv ci-dessus est une approche assez courante .. Une autre solution consiste à utiliser la méthode bind ().

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

Matériel de référence tiré de cette question , réponse fournie par Pointy.

Documentation pour la méthode bind () .

Un bon article sur javascript scope , qui peut encore revenir vous mordre dans TypeScript.

5
KhainTCore

Il y a un petit truc pour résoudre ça. J'espère que cela t'aides.

D'abord faire 

const this1 = this;

puis

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