Angular:为组件字段提供对服务功能的引用并从未按预期工作的模板调用它

Question

In my Plunker here (从官方文档修改了Tour of Heroes app)我在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>

我对它的行为感到困惑。

当我点击 Do Heroes Exist? 按钮时，我希望控制台(和警报弹出窗口)记录 "doHeroesExist called.. true"，但它却记录了服务功能的整体:

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

为什么会这样？

为什么服务不能正确评估 heroesExist = true;，因为它是在服务的构造函数中定义的？

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

Answer 1

当您传递函数并稍后在另一个上下文中调用它时，函数中 this 的上下文将丢失。这就是为什么您会看到显示“doHeroesExist called.. undefined”的警报，因为服务方法中的 this 不是指服务本身。

要解决它，在将函数作为变量返回之前，将上下文绑定(bind)到它:

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