双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。
包含本指南中的代码片段的可工作示例参见现场演练/ 下载范例。
为了充分利用双向绑定，你应该对以下概念有基本的了解：
双向绑定将属性绑定与事件绑定结合在一起：
Angular 的双向绑定语法是方括号和圆括号的组合 [()]。[] 进行属性绑定，() 进行事件绑定，如下所示。
<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 值的事件。
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 事件。
<div>
<button (click)="dec()" title="smaller">-</button>
<button (click)="inc()" title="bigger">+</button>
<label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
在 AppComponent 模板中， fontSizePx 被双向绑定到 SizerComponent 。
<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
在 AppComponent 中，通过将 fontSizePx 的值设置为 16 来设置初始 SizerComponent.size 值。
fontSizePx = 16;
单击这些按钮将更新 AppComponent.fontSizePx。修改后的 AppComponent.fontSizePx 值将更新样式绑定，从而使显示的文本变大或变小。
双向绑定语法是属性绑定和事件绑定的组合的简写形式。拆成单独的属性绑定和事件绑定形式的 SizerComponent 代码如下：
<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
$event 变量包含 SizerComponent.sizeChange 事件的数据。当用户单击按钮时，Angular 将 $event 赋值给 AppComponent.fontSizePx。
表单中的双向绑定
因为没有任何原生 HTML 元素遵循了 x 值和 xChange 事件的命名模式，所以与表单元素进行双向绑定需要使用 NgModel。