Angular 组件的双向绑定

组件双向绑定的本质就是属性绑定加事件绑定，在引发绑定事件的时候改变属性值。举个例子：

// 子组件
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-sizer',
  template: `
    <p>子组件中的值：{{size}}</p>
    子组件中改为：<span (click)="change.emit($event.target.textContent)">
      <button>small</button>
      <button>large</button>
    </span>
  `,
})
export class SizerComponent {
  @Input() size: 'small' | 'large' = 'small';
  @Output() change = new EventEmitter();
}

import { Component } from "@angular/core";

@Component({
  selector: 'my-app',
  template: `
    <p>父组件中的值：{{size}}</p>
    <app-sizer [size]="size" (change)="size = $event"></app-sizer>
  `,
})
export class AppComponent {
  size = 'large';
}

其中属性绑定 [size]="size" 将值传入组件，事件绑定 (change)="size = $event" 让组件发生变化时将变化的值输出赋值给 size ，这样一来便实现了双向绑定。

Angular 的双向绑定语法是方括号和圆括号的组合 [()]。要使用该语法，@Output() 属性的名字必须遵循 inputChange 模式，其中 input 是相应 @Input() 属性的名字。我们把例子中的 change 改为 sizeChange 就可以使用双向绑定语法了，即 <app-sizer [(size)]="size"></app-sizer>。

Angular 的 FormsModule 提供了一个 ngModel 指令，使用 [(ngModel)]="变量" 形式可以进行双向绑定。这其实是一个语法糖，相当于[ngModel]="变量" (ngModelChange)="变量 = $event"。

文中使用的工具或者包的版本：
Angular CLI 11.0.6