Question

我正在从official hero tutorial学习角度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>

我已阅读有关属性绑定here的指南，但仍无法理解以下代码：

[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 of numExpression and the unit px`（或任何其他有效的CSS单位）

Answer 2

这里的区别在于class与HTML元素无关，它是一个角度绑定。您将Angular的selected对象的class属性绑定到表达式，如果为true / false，将移除或添加属性。

该属性绑定到class="selected"，因为当您单击li元素时，您点击的事件处理程序会设置英雄，并且它们匹配。

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

2 个答案: