Angular Tour of Heroes教程getHeroes（）函数

Question

我对Angular的Heroes教程中的getHeroes（）函数有疑问：

getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }

有人可以向我解释一下语法＆＃34; heroes => this.heroes = heroes＆＃34;是在做？我来自java和python，从未见过这样的表达

同样如此：

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

[class.selected]="hero === selectedHero"在做什么？

Answer 1

箭头功能

heroes => this.heroes = heroes

上面的代码段大致（不完全，特别是因为它包含this，但作为一个很好的解释）与以下相同。

function (heroes) { this.heroes = heroes }

在EcmaScript 2015中引入了箭头语法。

在JavaScript中（就像在Python中一样），函数是该语言的一等公民，这意味着它们可以像任何其他常量或变量一样传递。

在这种情况下，您将函数传递给Observable实例的subscribe方法。此方法接受一旦观察到英雄事件将执行的函数。它将传递该事件的有效负载，在本例中为heroes，并将其分配给同名的类属性（this.heroes）。

你应该read more about arrow functions on MDN。

Angular模板语言

[class.selected]="hero === selectedHero"

这是Angular模板语言的特定内容。模板是使用通用扩展名.html的文件编写的，但它们实际上不是HTML（正如您从该代码段中看到的那样）。

[class.foo]期望在右侧有一个表达式。如果该表达式导致truthy值，则类foo将分配给应用该指令的元素。它类似于以下内容。

if (hero === selectedHero)
  element.classList.add('foo')
else
  element.classList.remove('foo')

当然，主要区别在于Angular以优化的方式生成此代码，以便每次hero或selectedHero更改时都会对其进行评估，因此您不必担心操作DOM你自己（这是Angular背后的基本思想）。