# 属性绑定
Angular 中的属性绑定可帮助你设置 HTML 元素或指令的属性值。使用属性绑定，可以执行诸如切换按钮、以编程方式设置路径，以及在组件之间共享值之类的功能。
TIP
包含本指南中的代码片段的工作示例，请参阅现场演练/ 下载范例 。
# 前提条件
组件基础模板基础绑定语法
# 了解数据流
属性绑定在单一方向上将值从组件的属性送到目标元素的属性。
TIP
有关侦听事件的更多信息，请参阅事件绑定。
要读取目标元素的属性或调用其方法，请参阅 ViewChild 和 ContentChild 的 API 参考手册。
# 绑定到属性
要绑定到元素的属性，请将其放在方括号 []中，这会将此属性标识为目标属性。
要绑定到元素的属性 ，请将其括在方括号 []内，这会将此属性标为目标属性。目标属性就是你要对其进行赋值的 DOM 属性 。
要为 image 元素的目标属性（src）赋值，请键入以下代码：
src/app/app.component.html
<img alt="item" [src]="itemImageUrl">
在大多数情况下，目标名称是 Property（属性）名称，即使它看起来是 Attribute（属性）名称。
在这个例子中，src就是 <img>元素的 Property 名称。
方括号 []使 Angular 将等号的右侧看作动态表达式进行求值。
如果不使用方括号，Angular 就会将右侧视为字符串字面量并将此属性设置为该静态值。
要将字符串赋值给属性，请键入以下代码：
src/app.component.html
<app-item-detail childItem="parentItem"></app-item-detail>
省略方括号就会渲染出字符串 parentItem，而不是 parentItem的值。
# 将元素的属性设置为组件属性的值
要将 <img>的 src属性绑定到组件的属性，请将 src放在方括号中，后跟等号，然后是组件的属性。
使用属性 itemImageUrl，键入以下代码：
src/app/app.component.html
<img alt="item" [src]="itemImageUrl">
在组件类 AppComponent中声明 itemImageUrl属性。
src/app/app.component.ts
itemImageUrl = '../assets/phone.png';
# colspan和 colSpan
最容易混淆的地方是 colspan这个 Attribute 和 colSpan这个 Property。请注意，这两个名称只有一个字母的大小写不同。
要通过 colSpan使用属性绑定，请键入以下内容：
src/app/app.component.html
<!-- Notice the colSpan property is camel case -->
<tr><td [colSpan]="1 + 1">Three-Four</td></tr>
要在组件的 isUnchanged属性为 true时禁用按钮，请键入以下内容：
src/app/app.component.html
<!-- Bind button disabled state to `isUnchanged` property -->
<button type="button" [disabled]="isUnchanged">Disabled Button</button>
要设置指令的属性，请键入以下内容：
src/app/app.component.html
<p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
要将自定义组件的模型属性设置为供父组件和子组件互相通信的，请键入以下内容：
src/app/app.component.html
<app-item-detail [childItem]="parentItem"></app-item-detail>
# 切换按钮功能
要使用布尔值来禁用某个按钮的特性，请将 DOM 属性 disabled绑定到此类中的某个 Boolean 型属性。
src/app/app.component.html
<!-- Bind button disabled state to `isUnchanged` property -->
<button type="button" [disabled]="isUnchanged">Disabled Button</button>
由于 AppComponent中属性 isUnchanged的值是 true，Angular 会禁用该按钮。
src/app/app.component.ts
isUnchanged = true;
# 下一步呢？
属性绑定的最佳实践事件绑定文本插值类和样式绑定attribute 绑定