组件双向绑定的本质就是属性绑定加事件绑定,在引发绑定事件的时候改变属性值。举个例子:
// 子组件
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