角度：サービス関数への参照コンポーネントフィールドを与えると予想される

Question

In my Plunker here（公式ドキュメントからの変更Tour of Heroesアプリ）として機能していないテンプレートからそれを呼び出す私はhero.service

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

でこのメソッドを作成し、それを使用しますコールとして

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

}

app.componentクラスheroesExist()メートルでethodテンプレート

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

に私はその行動によって困惑しています。

「英雄が存在しますか？」をクリックすると、ボタンは、私が「真..呼ばdoHeroesExist」コンソール（および警告ポップアップが）を記録することを期待、代わりにそれは、サービス機能の体全体をログに記録します。呼ば

doHeroesExist ...ƒ（）{ console.log（ "doHeroesExist called .."、this.heroesExist）; アラート（ "doHeroesExist called .." + JSON.stringify（this.heroesExist））; これを返すthis.heroesExist; }

どうしてですか？

サービスがサービスのコンストラクタで定義されているように、heroesExist = true;を正しく評価しないのはなぜですか？

PLUNKERのLINK：あなたの周りの機能を渡し、後で別の文脈では、それを呼び出すとhttps://plnkr.co/edit/MBEGkqnV5kie9PB3az9K?p=preview

Answer 1

、関数内thisのコンテキストが失われてしまいます。サービスメソッドのthisがサービス自体を参照していないため、 "doHeroesExist called undefined"という警告が表示されます。ウルplunkerで

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

Answer 2

をちょうどのために働い

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

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

を置き換える：変数としての機能を返す前に、それにコンテキストをバインドし、それを解決するために

私