属性绑定[class.selected]中的属性是什么？

Question

我正在从官方英雄教程学习角度2 .

<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"

问题1: 我知道html标签有一个类属性,但是class属性没有一个名为"selected"的键.class属性可以有一个值,即字符串"selected".为什么这个属性绑定有效？

问题2: 上面的属性绑定如何转换为class ="selected"？

Answer 1

[class.xxx]并且[style.xxx.yy]是特殊的Angular2绑定语法

[class.my-class]="expression"

添加(或删除)的CSS类my-class视向(或从)该元素是否expression导致true或false

[style.width.px]="numExpression"

设置width(或任何其他有效的样式属性)to the value ofnumExpression and the unitpx`(或任何其他有效的CSS单元)

Answer 2

此处的区别是class与HTML元素无关，它是角度绑定。您将selectedAngular class对象的属性绑定到表达式，如果为true / false，它将删除或添加该属性。

该属性class="selected"之所以绑定，是因为单击li元素时，单击的事件处理程序将设置英雄，并且它们匹配。