一、绑定类型

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

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

{{expression}} [target]="expression" bind-="expression"

[()]="expression" bindon="expression"

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

二、绑定目标

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

<img [src]="heroImageUrl"> <hero-detail [hero="currentHero"></hero-detail><div [ngClass="{special: isSpecial}"></div>

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

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

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

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

attribute绑定:@H_502_422@[attr.colspan]

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

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

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

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

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

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

绑定会通过名叫$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() {
  }

}

  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 内置结构型指令