Come accedere alle proprietà dell'oggetto nella funzione di cattura http rxjs di Angular 2 con (this)

Question

Utilizzando il nuovo servizio http in angular 2, mi piacerebbe fare di più con i miei errori piuttosto che lanciando errori nella console. Sfortunatamente, non riesco ad accedere alle mie proprietà dell'oggetto dalla funzione di callback catch.

La mia chiamata di servizio http:

return this.http.get(this.apiUrl, options) 
      .map(this.extractData, this) 
      .catch(this.handleError) 

mio handleError callback fn:

handleError (error) { 
    console.log(this)//undefined! 
    if(error.status === 401){ 
    this.router.navigate(['/login'])//because `this` is undefined, this does not work 
    } 
    ... 
} 

Secondo rxjs docs, cattura non supporta un secondo thisArg argomento, che è molto utile nella mappa funzione:

extractData(res) { 
    console.log(this)//returns the instance of my service class, which is what I want 
    this.someFunctionInMyService()//works great! In fact, I could call this.router.navigate if I wanted. 
    return res.json() 
} 

Quindi, come posso chiamare o utilizzare una proprietà del mio servizio dalla callback handleError?

Answer 1

Il problema è che si fa riferimento a una funzione in modo diretto in modo da perdere il suo contesto (il this) all'esecuzione.

Per evitare questo, è necessario avvolgere il metodo:

return this.http.get(this.apiUrl, options) 
     .map(this.extractData, this) 
     .catch(err => { 
      this.handleError(err); 
     }) 

o sfruttare il metodo bind:

return this.http.get(this.apiUrl, options) 
     .map(this.extractData, this) 
     .catch(this.handleError.bind(this) 

Ma c'è svantaggi di usare il secondo approccio con dattiloscritto dal momento che si perde tipi.

Vedere questo link:

• https://basarat.gitbooks.io/typescript/content/docs/tips/bind.html