Angular4_td中的colspan

<td [attr.colspan]="progressCode == 'WAITinG' ? 11: 10 ">

attribute、class 和 style 绑定@H_450_7@

模板语法为那些不太适合使用属性绑定的场景提供了专门的单向数据绑定形式。

attribute 绑定

可以通过attribute 绑定来直接设置 attribute 的值。

本章中，通篇都在说通过属性绑定来设置元素的属性总是好于用字符串设置 attribute。为什么 Angular 还提供了 attribute 绑定呢？

因为当元素没有属性可绑的时候，就必须使用 attribute 绑定。

考虑ARIA，SVG和 table 中的 colspan/rowspan 等 attribute。 它们是纯粹的 attribute，没有对应的属性可供绑定。

如果想写出类似下面这样的东西，现状会令我们痛苦：

content_copy<tr><td colspan="{{1 + 1}}">Three-Four</td></tr></td></tr>

会得到这个错误：

content_copyTemplate parse errors: Can't bind to 'colspan' since it isn't a kNown native property （模板解析错误：不能绑定到 'colspan'，因为它不是已知的原生属性）

正如提示中所说，<td>元素没有colspan属性。 但是插值表达式和属性绑定只能设置属性，不能设置 attribute。

我们需要 attribute 绑定来创建和绑定到这样的 attribute。

attribute 绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名，而是由attr前缀，一个点 (.) 和 attribute 的名字组成。 可以通过值为字符串的表达式来设置 attribute 的值。

这里把[attr.colspan]绑定到一个计算值：

src/app/app.component.html

content_copy<table border1> <!-- expression calculates colspan=2 --> <tr><td [attr.colspan]"1 + 1">One-Two</td></tr> <!-- ERROR: There is no `colspan` property to set! <tr><td colspan="{{1 + 1}}">Three-Four</td></tr> --> <tr><td>Five</td><td>Six</td></tr> </table>

这里是表格渲染出来的样子：

One-Two
Five	Six

attribute 绑定的主要用例之一是设置 ARIA attribute（译注：ARIA指可访问性，用于给残障人士访问互联网提供便利）， 就像这个例子中一样：

src/app/app.component.html

content_copy<!-- create and set an aria attribute for assistive technology --> <button [aria-label]"actionName">{{actionNamE}} with Aria</button>

---

CSS 类绑定

借助CSS 类绑定，可以从元素的classattribute 上添加和移除 CSS 类名。

CSS 类绑定绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名，而是由class前缀，一个点 (.)和 CSS 类的名字组成， 其中后两部分是可选的。形如：[class.class-name]。

下列例子示范了如何通过 CSS 类绑定来添加和移除应用的 "special" 类。不用绑定直接设置 attribute 时是这样的：

src/app/app.component.html

content_copy<!-- standard class attribute setTing --> <div class"bad curly special">Bad curly special</div>

可以把它改写为绑定到所需 CSS 类名的绑定；这是一个或者全有或者全无的替换型绑定。 （译注：即当 badCurly 有值时 class 这个 attribute 设置的内容会被完全覆盖）

src/app/app.component.html

content_copy<!-- reset/override all class names with a binding --> "bad curly special" [class]"badCurly">Bad curly最后，可以绑定到特定的类名。 当模板表达式的求值结果是真值时，Angular 会添加这个类，反之则移除它。
src/app/app.component.html 
 
content_copy<!-- toggle the "special" class on/off with a property --> <div [class.special]"isSpecial">The class binding is special</div> <!-- binding to `class.special` trumps the class attribute --> "special" ["!isSpecial">This one is not so special</div>
 
 
 
  
虽然这是切换单一类名的好办法，但我们通常更喜欢使用NgClass指令来同时管理多个类名。
 
 
 
 
样式绑定 
 
通过样式绑定，可以设置内联样式。
 
 
样式绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名，而由style前缀，一个点 (.)和 CSS 样式的属性名组成。 形如：[style.style-property]。
src/app/app.component.html 
 
content_copystyle.color]"isSpecial ? 'red': 'green'">Red</button> BACkground-color]"canSave ? 'cyan': 'grey'" >Save</button>
 
 
有些样式绑定中的样式带有单位。在这里，以根据条件用 “em” 和 “%” 来设置字体大小的单位。
src/app/app.component.html 
 
content_copyfont-size.em]"isSpecial ? 3 : 1" >Bigfont-size.%]"!isSpecial ? 150 : 50" >small</button>
 
 
 
  
虽然这是设置单一样式的好办法，但我们通常更喜欢使用NgStyle指令来同时设置多个内联样式。
 
 
 
 
 
  
注意，样式属性命名方法可以用中线命名法，像上面的一样 也可以用驼峰式命名法，如fontSize。
 
 
 
 
 
  
  
 
事件绑定 ((事件名))@H_450_7@ 
 
前面遇到的绑定的数据流都是单向的：从组件到元素。
 
 
但用户不会只盯着屏幕看。他们会在输入框中输入文本。他们会从列表中选取条目。 他们会点击按钮。这类用户动作可能导致反向的数据流：从元素到组件。
 
 
知道用户动作的唯一方式是监听某些事件，如按键、鼠标移动、点击和触摸屏幕。 可以通过 Angular 事件绑定来声明对哪些用户动作感兴趣。
 
 
事件绑定语法由等号左侧带圆括号的目标事件和右侧引号中的模板语句组成。 下面事件绑定监听按钮的点击事件。每当点击发生时，都会调用组件的onSave()方法。
src/app/app.component.html 
 
content_copy<button (click)"onSave()"</button>
 
 
目标事件
 
 
圆括号中的名称—— 比如(click)—— 标记出目标事件。在下面例子中，目标是按钮的 click 事件。
src/app/app.component.html 
 
content_copy有些人更喜欢带on-前缀的备选形式，称之为规范形式：
src/app/app.component.html 
 
content_copy<button on-click>On Save元素事件可能是更常见的目标，但 Angular 会先看这个名字是否能匹配上已知指令的事件属性，就像下面这个例子：
src/app/app.component.html 
 
content_copy<!-- `myClick` is an event on the custom `ClickDirective` --> <div (@H_411_34@myClick)"clickmessage=$event" clickable>click with myClick 
  
更多关于该@H_838_93@myClick指令的解释，见给输入/输出属性起别名。
 
 

content_copy<input [value]"currentHero.name" (input)"currentHero.name=$event.target.value" >

content_copytemplate: ` <div> <img src="{{heroImageUrl}}"> <span [style.text-decoration]="lineThrough"> {{prefix}} {{hero?.namE}} </span> <button (click)="@R_618_4453@">delete</button> </div>`

content_copy// This component makes a request but it can't actually delete a hero. deleterequest = new EventEmitter<Hero>(); delete() { this.deleterequest.emit(@H_265_673@.hero); }

content_copy<app-hero-detail (deleterequest)"deleteHero($event)" [hero]"currentHero"></app-hero-detail>

content_copy

content_copy<app-sizer [(size)]"fontSizePx"></app-sizer> px]>Resizable TextSizerComponent.size初始值是AppComponent.fontSizePx。 点击按钮时，通过双向绑定更新AppComponent.fontSizePx。 被修改的AppComponent.fontSizePx通过样式绑定，改变文本的显示大小。
 
 
双向绑定语法实际上是属性绑定和事件绑定的语法糖。 Angular将SizerComponent的绑定分解成这样：
src/app/app.component.html (two-way-2) 
 
content_copy<app-sizer [size]"fontSizePx" (sizeChange)"fontSizePx=$event"></app-sizer>
 
 
$event变量包含了SizerComponent.sizeChange事件的荷载。 当用户点击按钮时，Angular 将$event赋值给AppComponent.fontSizePx。
 
 
显然，比起单独绑定属性和事件，双向数据绑定语法显得非常方便。
 
 
我们希望能在像<input>和<SELEct>这样的 HTML 元素上使用双向数据绑定。 可惜，原生 HTML 元素不遵循x值和xChange事件的模式。
 
 
幸运的是，Angular 以NgModel指令为桥梁，允许在表单元素上使用双向数据绑定。
 
 
内置指令 
 
上一版本的 Angular 中包含了超过 70 个内置指令。 社区贡献了更多，这还没算为内部应用而创建的无数私有指令。
 
 
在新版的 Angular 中不需要那么多指令。 使用更强大、更富有表现力的 Angular 绑定系统，其实可以达到同样的效果。 如果能用简单的绑定达到目的，为什么还要创建指令来处理点击事件呢？
src/app/app.component.html 
 
content_copy我们仍然可以从简化复杂任务的指令中获益。 Angular 发布时仍然带有内置指令，只是没那么多了。 我们仍会写自己的指令，只是没那么多了。
 
 
下面来看一下那些最常用的内置指令。它们可分为属性型指令或结构型指令。
 
 
内置属性型@H_874_527@指令 
 
属性型指令会监听和修改其它HTML元素或组件的行为、元素属性（Attribute）、DOM属性（Property）。 它们通常会作为HTML属性的名称而应用在元素上。
 
 
更多的细节参见属性型指令一章。 很多Angular模块，比如RouterModule和FormsModule都定义了自己的属性型指令。 本节将会介绍几个最常用的属性型指令：
 
 
 
  
NgClass- 添加或移除一组CSS类
 
  
@L_616_156@- 添加或移除一组CSS样式
 
  
NgModel- 双向绑定到HTML表单元素
 
 
 
 
NgClass 指令 
 
我们经常用动态添加或删除 CSS 类的方式来控制元素如何显示。 通过绑定到NgClass，可以同时添加或移除多个类。
 
 
CSS 类绑定是添加或删除单个类的最佳途径。
src/app/app.component.html 
 
content_copy当想要同时添加或移除多个CSS 类时，NgClass指令可能是更好的选择。
 
 
试试把ngClass绑定到一个 key:value 形式的控制对象。这个对象中的每个 key 都是一个 CSS 类名，如果它的 value 是true，这个类就会被加上，否则就会被移除。
 
 
组件方法setCurrentClasses可以把组件的属性currentClasses设置为一个对象，它将会根据三个其它组件的状态为true或false而添加或移除三个类。
src/app/app.component.ts 
 
content_copycurrentClasses: {}; setCurrentClasses{ // CSS classes: added/removed per current state of component properties @H_265_673@.currentClasses = { 'saveable': @H_265_673@.canSave:rgb(102, 'modified'!@H_265_673@.isUnchanged'special'.isSpecial }; 把NgClass属性绑定到currentClasses，根据它来设置此元素的CSS类：
src/app/app.component.html 
 
content_copy<div [ngClass]"currentClasses">This div is initially saveable,unchanged,and special 
  
你既可以在初始化时调用setCurrentClassess()，也可以在所依赖的属性变化时调用。