redirigent vers une route après appel api dans angulaire (en utilisant « cette »)

Question

Ceci est similaire à redirect to a route after api call in angular2 mais je veux utiliser une variable de classe (this.areaCode) dans le cadre de la redirection ou mettre à jour une variable (this.userInfoMessage). Par exemple:

onSubmit(form: string): void { 
    this.taskService.createTask(task).subscribe(this.taskCreated,this.handleError) 
} 
private taskCreated (resp: any) { 
    console.log("Task created successfully",resp) 
    this.router.navigate([`/areas/${this.areaCode}`]); // eg: "/areas/12" //"this" is of type SafeSubscriber, not my class 
} 
private handleError (error: any) { 
    this.userInfoMessage="We've got errors here!" //"this" is of type SafeSubscriber, not my class so the message is now bound 
    console.log(error) 
} 

Cependant, je ne peux pas comprendre comment obtenir une référence à la classe dans ces fonctions. Ai-je besoin d'utiliser l'astuce self=this. Si c'est le cas, comment?

Merci

MISE À JOUR

J'ai essayé passer this dans this.taskService.createTask(task).subscribe(this.taskCreated,this.handleError).bind(this) mais Property 'bind' does not exist on type 'Subscription'.

MISE A JOUR (2)

Je suppose que la question est « comment puis-je passer une référence dans un abonnement rappeler?"

Après avoir lu le Q lié si je veux souscrire passer dans une référence à l'objet courant, je l'ai essayé d'utiliser

var self= this 
this.taskService.createTask(task).subscribe(this.taskCreated(self),this.handleError) 

ne compile pas. J'ai encore le rappel défini comme taskCreated privée (resp: any)

Je ne pense pas que ce soit tout à fait le même que le Q. lié

Qu'est-ce que je manque?

Merci

Answer 1

vous devez bind les fonctions elles-mêmes, pas la méthode souscrire.

onSubmit(form: string): void { 
    this.taskService.createTask(task).subscribe(this.taskCreated.bind(this),this.handleError.bind(this)) 
} 

Une autre façon de le faire serait une fermeture:

this.taskService.createTask(task) 
     .subscribe(
      (res) => this.taskCreated(res), 
      (err) => this.handleError 
     ) 
    } 

A niftier, plus propre et moins connu pour ce faire dactylographiée serait instancier la méthode elle-même avec un graisse flèche, conduisant à un this lexical qui se réfère toujours à la classe elle-même:

onSubmit(form: string): void { 
    this.taskService.createTask(task).subscribe(this.taskCreated,this.handleError) 
} 

private taskCreated = (resp: any) => { 
    console.log("Task created successfully",resp) 
    this.router.navigate([`/areas/${this.areaCode}`]); // 'this' will refer to class! 
} 

private handleError = (error: any) => { 
    this.userInfoMessage="We've got errors here!" // 'this' will also refer to the class! 
    console.log(error) 
} 

les types officiels Les docs de cript conseillent contre la liaison de fonction si possible, ainsi j'emploierais une des deux solutions deux.

Answer 2

Vous pouvez essayer cette:

private handleError = (error) => { 
    this.userInfo = "we have a problem here"; 
}