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

问题描述

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

I am learning angular 2 from official hero tutorial.

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

我已经阅读了有关属性绑定的指南这里，但仍然无法理解以下代码:

I've read the guide about property binding here, but still couldn't understand the following code:

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

问题1:我知道html标记具有class属性，但是class属性没有名为"selected"的键. class属性可能具有一个值，该值是字符串"selected".这个属性绑定为何有效?

Question 1:I know html tag has a class property, but class property does not have a key called "selected". The class property may have a value, which is string "selected". How come this property binding is valid?

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

Question 2:How does above property binding translated to class="selected" ?

推荐答案

[class.xxx]和[style.xxx.yy]是特殊的Angular2绑定语法，其中

[class.xxx] and [style.xxx.yy] are special Angular2 binding syntax where

[class.my-class]="expression"

根据expression结果是true还是false

[style.width.px]="numExpression"

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

Sets the width (or any other valid style property)to the value ofnumExpressionand the unitpx` (or any other valid CSS unit)

这篇关于属性绑定[class.selected]中的属性是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！