Angular 手动实现ngModal数据双向绑定

ngModel

Angular中我们在formsModule中使用ngModel实现数据的双向绑定

<input type="text" [(ngModel)]="name" /> 

这里的ngModel其实是个语法糖，它等价与属性绑定+事件绑定，就像下面这样

<input type="text" [ngModel]="name" (ngModelChange)="name = $event" />

也可以写成普通的属性绑定+普通事件

<input type="text" [value]="name" (input)="name = $event.target.value" />

手动实现

自己来实现一个双向绑定
父组件

<app-child [(name)]="name"> </app-child>
// ts
public name:string = "";

子组件html：

<input type="text" [value]="name" (input)="name = $event.target.value">

子组件ts

private _name:string = '';
  // 输出型属性:事件发射器 EventEmitter  从 angular/core中导入
@Output() nameChange = new EventEmitter();
@Input()
public get name():string{
  return this._name;
}
public set name(value:string){
  this._name = value;
  this.nameChange.emit(value)
}

这样就完成了， 对于父组件来说，就是实现了子组件的数据双向绑定！