angulaire: Donner un champ composant une référence à une fonction de service et de l'appeler à partir du modèle ne fonctionne pas comme prévu

Question

In my Plunker here (modifié Tour of Heroes application de documents officiels) J'ai créé cette méthode dans le hero.service

doHeroesExist(): boolean { 
    console.log("doHeroesExist called..", this.heroesExist); 
    alert("doHeroesExist called.." + JSON.stringify(this.heroesExist)); 
    return this.heroesExist; 
    } 

et l'utiliser dans la classe app.component

ngOnInit(): void { 
    //this.getHeroes(); 
    this.heroesExist = this.heroService.doHeroesExist; 
    console.log("app ngOnInit called...", this.heroesExist); 

}

appellent le heroesExist() comme m ODE dans le modèle

<button (click)="heroesExist()">Do Heroes Exist?</button> 

Je suis intrigué par son comportement.

Lorsque je clique sur le Do Heroes Exist? bouton, je pense à se connecter "doHeroesExist appelé .. vrai" la console (et la fenêtre d'alerte), mais il enregistre tout le corps de la fonction de service:

doHeroesExist appelé .. ƒ() { console.log ("doHeroesExist appelé ..", this.heroesExist); alert ("doHeroesExist appelé .." + JSON.stringify (this.heroesExist)); Renvoie this.heroesExist; }

Pourquoi cela se produit-il?

Pourquoi le service n'évalue-t-il pas correctement heroesExist = true; tel qu'il est défini dans le constructeur du service?

LINK PLUNKER: https://plnkr.co/edit/MBEGkqnV5kie9PB3az9K?p=preview

Answer 1

Lorsque vous passez la fonction autour et appelez plus tard dans un autre contexte, le contexte de this dans la fonction est perdue. C'est pourquoi vous voyez l'alerte indiquant "doHeroesExist called .. undefined", car this dans votre méthode de service ne fait pas référence au service lui-même.

Pour le résoudre, avant de retourner la fonction comme une variable, lier le contexte à elle:

this.heroesExist = this.heroService.doHeroesExist.bind(this.heroService); 

Answer 2

Dans ur plunker juste remplacer <button (click)="heroesExist()">Do Heroes Exist?</button>

avec

<button (click)="heroService.doHeroesExist()">Do Heroes Exist?</button> 

qui a fonctionné pour