Angular: предоставление компоненту поля ссылки на сервисную функцию и вызов ее из шаблона, который не работает должным образом

Question

В моем Plunker (модифицированном приложении Tour of Heroes из официальных документов) я создал этот метод в hero.service

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

и использовать его в app.component учебный класс

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

}

как зовут heroesExist() метод в шаблоне

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

Я озадачен его поведением.

Когда я нажимаю " Есть ли герои?" Кнопка, я ожидаю, что консоль (и всплывающее окно с предупреждением) будет регистрировать "doHeroesExist named.. true", но вместо этого она регистрирует весь текст сервисной функции:

doHeroesExist named.. ƒ () { console.log("doHeroesExist named..", this.heroesExist); alert("doHeroesExist звонил.." + JSON.stringify(this.heroesExist)); вернуть this.heroesExist; }

Почему это происходит?

Почему сервис не оценивает правильно heroesExist = true; как это определено в конструкторе сервиса?

ССЫЛКА НА ПЛАНКЕР: https://plnkr.co/edit/MBEGkqnV5kie9PB3az9K?p=preview

Answer 1

Когда вы передаете функцию и вызываете ее позже в другом контексте, контекст this в функции теряется. Вот почему вы видите предупреждение "doHeroesExist named.. undefined", как this в вашем методе обслуживания не относится к самой службе.

Чтобы решить эту проблему, перед возвратом функции в качестве переменной привяжите к ней контекст:

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

Answer 2

В ур плункер просто замени <button (click)="heroesExist()">Do Heroes Exist?</button>

с

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

Это сработало для меня