Data binding 将组件的类与其模板连接。Angular 有四种形式，按照数据流方向和独特的语法来区分。
1. Interpolation — 类 → 视图（文本）
html
<h1>{{ title }}</>
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind a DOM property -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- pass to a component @Input -->
方括号 [ ] 将属性绑定到表达式（单向的，数据向下流入视图）。
<button (click)="save()">Save</button> <!-- DOM event → method -->
<input (input)="onInput($event)" /> <!-- $event = the event object -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- component @Output -->
圆括号 ( ) 监听事件（单向的，数据从视图向上流入类）。
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
[(...)] 语法（"banana in a box"）将 property binding 和 event binding 结合起来实现双向同步——最常见的是在表单输入上与 ngModel 一起使用。
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
双向的 [()] 只是 property binding [] 加上 event binding () 的组合——方括号显示了方向。
Data binding 是 Angular 保持类和模板同步的方式——这是每个动态 UI 背后的机制。
了解四种类型及其语法（{{}}、[]、()、[()]）以及每一种的数据流方向对于阅读和编写任何 Angular 模板都是必不可少的；几乎 Angular 模板中的每一行都会使用其中之一。