# 双向绑定

双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。

TIP

包含本指南中的代码片段的可工作示例参见现场演练/ 下载范例 。

# 前提条件

为了充分利用双向绑定，你应该对以下概念有基本的了解：

属性绑定
事件绑定
输入和输出

双向绑定将属性绑定与事件绑定结合在一起：

绑定	详情
属性绑定	设置特定的元素属性。
事件绑定	侦听元素更改事件。

# 添加双向数据绑定

Angular 的双向绑定语法是方括号和圆括号的组合 [()]。[]进行属性绑定，()进行事件绑定，如下所示。

src/app/app.component.html

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

# 双向绑定工作原理

为了使双向数据绑定有效，@Output()属性的名字必须遵循 inputChange模式，其中 input是相应 @Input()属性的名字。比如，如果 @Input()属性为 size，则 @Output()属性必须为 sizeChange。

后面的 sizerComponent具有值属性 size和事件属性 sizeChange。size属性是 @Input()，因此数据可以流入 sizerComponent。sizeChange事件是一个 @Output()，它允许数据从 sizerComponent流出到父组件。

接下来，有两个方法，dec()用于减小字体大小，inc()用于增大字体大小。这两种方法使用 resize()在最小/最大值的约束内更改 size属性的值，并发出带有新 size值的事件。

src/app/sizer.component.ts

export class SizerComponent {

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

  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);
  }
}

sizerComponent模板有两个按钮，分别将 click 事件绑定到 inc()和 dec()方法。当用户单击按钮之一时，sizerComponent调用相应的方法。inc()和 dec()这两个方法分别使用 +1或 -1调用 resize()方法，它使用新的 size 值引发 sizeChange事件。

src/app/sizer.component.html

<div>
  <button type="button" (click)="dec()" title="smaller">-</button>
  <button type="button" (click)="inc()" title="bigger">+</button>
  <span [style.font-size.px]="size">FontSize: {{size}}px</span>
</div>

在 AppComponent模板中，fontSizePx被双向绑定到 SizerComponent。

src/app/app.component.html

<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

在 AppComponent中，通过将 fontSizePx的值设置为 16来设置初始 SizerComponent.size值。

src/app/app.component.ts

fontSizePx = 16;

单击这些按钮将更新 AppComponent.fontSizePx。修改后的 AppComponent.fontSizePx值将更新样式绑定，从而使显示的文本变大或变小。

双向绑定语法是属性绑定和事件绑定的组合的简写形式。拆成单独的属性绑定和事件绑定形式的 SizerComponent代码如下。

src/app/app.component.html (expanded)

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

$event变量包含 SizerComponent.sizeChange事件的数据。当用户单击按钮时，Angular 将 $event赋值给 AppComponent.fontSizePx。

表单中的双向绑定Two-way binding in forms因为没有任何原生 HTML 元素遵循了 x值和 xChange事件的命名模式，所以与表单元素进行双向绑定需要使用 NgModel。关于如何在表单中使用双向绑定的更多信息，请参见 Angular NgModel 。

← 属性绑定了解管道 →