Angular 2 call setInterval() undefined Modulo servizi Iniezione di date

Question

Voglio chiamare una funzione ogni 10 minuti utilizzando setInterval() e in questa funzione voglio utilizzare un servizio (chiamato auth) che ottengo dalla dipendenza iniettore di angolare 2, il problema è che la console mi dice seguente:

EXCEPTION: TypeError: this.auth is undefined

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

Answer 1

questo nella funzione data a setInterval non punta alla classe quando viene chiamato.

Utilizzare invece la funzione freccia.

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

Answer 2

Un full discussion di questo problema può essere trovato nella documentazione per il metodo setInterval(), sottotitolati Il "questo" problema. Circa a metà pagina.

Il jist è che è il risultato di un cambiamento nella variabile "questo". La funzione passata nella funzione setInterval() viene estratta dal contesto di classe e inserita nel contesto di setInterval() (la finestra). Quindi, non è definito.

Esistono diverse soluzioni a questo problema. Il metodo proposto da toskv sopra è un approccio abbastanza comune. Un'altra soluzione è usare il metodo bind().

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

Materiale di riferimento da this question, risposta di punta.

Documentazione per bind() method.

Un buon articolo su javascript scope, che può ancora tornare a morderti in dattiloscritto.

Answer 3

C'è un piccolo trucco per risolverlo. Spero che questo ti aiuti.

prima fare

const this1 = this; 

poi

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