Angular 绑定语法简介

一、绑定类型

数据绑定是一种机制，用来协调用户所见和应用数据。虽然我们能往HTML推送值或者从HTML拉去值，但如果把这些琐事交给数据绑定框架处理，应用汇更容易编写、阅读和维护。只要简单地碧昂丁源和目标HTML元素之间声明绑定，框架就会完成这项工作。

Angular绑定的类型根据数据流的方向分成三类：从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

数据方向	语法	绑定类型
单向 从数据源到视图目标	{{expression}} [target]="expression" bind-target="expression"	插值表达式 Property Attribute 类 样式
单向 从视图目标到数据源	(target)="statement" on-target="statement"	事件
双向	[(target)]="expression" bindon-target="expression"	双向

注：除了插值表达式之外的绑定类型，在等号左边的是目标名，使用括号（[],()）绑定，或者使用前缀形式绑定(bind-,on-,bindon-)

模板绑定是通过property和事件来工作的，而不是attribute。

二、绑定目标

数据绑定的目标是Dom中的某些东邪。这个目标可能是(元素|组件|指令的)property、(元素|组件|指令的)事件，或attribute名。

绑定类型	目标	范例
Property	元素的 property 组件的 property 指令的 property	<img [src]="heroImageUrl"> <hero-detail [hero]="currentHero"></hero-detail> <div [ngClass]="{special: isSpecial}"></div>
事件	元素的事件 组件的事件 指令的事件	<button (click)="onSave()">Save</button> <hero-detail (deleteRequest)="deleteHero()"></hero-detail> <div (myClick)="clicked=$event" clickable>click me</div>
双向	事件与 property	<input [(ngModel)]="name">
Attribute	attribute（例外情况）	<button [attr.aria-label]="help">help</button>
CSS 类	classproperty	<div [class.special]="isSpecial">Special</div>
样式	styleproperty	<button [style.color]="isSpecial ? 'red' : 'green'">

1.属性绑定 （[属性名]）

当要把视图元素的属性设置为模板表达式时，就要写模板的属性绑定.

常用的比如：img的src属性、表单按钮的disabled属性等。

<img [src]="heroImageUrl">
<img bind-src="heroImageUrl">

2.attribute，calss和style绑定

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

attribute绑定:[attr.colspan]

<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
...
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

CSS类绑定： [class.class-name]

<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

样式绑定： [style.style-property]

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

有些样式绑定中的样式带有单位。在这里，可以根据条件用“em”、“%”等设置字体大小等。

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

3.事件绑定 ( （事件名） )

事件绑定语法有等号左侧带括号的目标事件和右侧引号的模板语句组成。

<button (click)="onSave()">Save</button>
<button on-click="onSave()">On Save</button>

$event和时间处理语句

绑定会通过名叫$event的事件对象传递关于此时间的信息(包括数据值).

事件对象的形态取决于目标时间。如果目标时间是原生DOM元素事件，$event是DOM事件对象，它有像target和target.value这样的属性。

也可以使用EventEmitter实现自定义事件，通常，指令使用Angular EventEmitter来触发自定义事件。

4.双向数据绑定 ( [(....)] )

双向绑定语法实际上是属性绑定和时间绑定的语法糖。

最常用的地方是表单提交处理.

再者用于不同组件之间的数据传递等

<my-sizer [(size)]="fontSizePx"></my-sizer>

详细示例如下：

SizerCommponnet组件：

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'my-sizer',
  template: `
  <div>
    <button (click)="dec()" title="smaller">-</button>
    <button (click)="inc()" title="bigger">+</button>
    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
  </div>`
})
export class SizerComponent implements OnInit {

  @Input() size: number | string;
  @Output() sizeChange = new EventEmitter<number>();
  
  constructor() { }

  dec() { this.resize(-1); }
  inc() {
    this.resize(+1);
  }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
  ngOnInit() {
  }

}

在ModelComponnet组件中使用：

  fontSize = 12;
  changeSize() {
    console.info(this.fontSize);
  }

<my-sizer [size]="fontSize" (sizeChange)="changeSize()"></my-sizer>

注：在当前组件使用其他组件，需要提前在主模块声明

@NgModule({
  declarations: [
    ModelComponent,
    SizerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [
    ModelComponent
  ]
})

更多：

Angular中的模板和表达式简介

Angular 内置属性型指令

Angular 内置结构型指令