【Angular 学习】第六天 组件之间的数据监测和双向绑定

一、监听自身数据的变化（setter getter）

setter函数表示你对数据进行了修改
getter函数表示你对数据进行了获取

html

<h1>监听自身数据变化h1>
<input type="text" [(ngModel)]="testNum">

ts

_testNum:string = '';//定义输入框的默认值

//setter
  set testNum(val:any){
    this._testNum = val
    console.log('setter',val);
  }

  //getter
  get testNum(){
    console.log('getter',this._testNum)
    return this._testNum;
  }

监听成功！

二、监听父组件的数据变化（ngOnChanges）

父组件html

<p>parent works!p>

<app-child [num]="num">app-child>

父组件ts

num:number = 1; //定义num

子组件ts

@Input() num:any;//接收从父组件传过来的num
//利用ngOnChanges生命周期钩子函数进行监听(只能监听@input传过来的数据，并且不能是对象)
ngOnChanges(): void {
    //监听num变化
    if(this.num) console.log('父组件的数据发生变化',this.num)
  }

监听成功！！

三、子父组件实现双向绑定

父组件html

<p>parent works!p>

<app-child [(num)]="num">app-child>

父组件ts

num:number = 1; //定义num

子组件html

<p>child works!p>
<input type="text" [(ngModel)]="num" (input)="inputChange()">

子组件ts

@Input() num:any; //接收父组件传过来的num
@Output() numChange = new EventEmitter<number>();//修改父组件的值，必须定义成xx(@Input的值)Change
//输入数据触发事件
inputChange(){
  this.numChange.emit(this.num); //将num的值传回给父组件
}

子父组件双向绑定成功！！！

以上就是组件之间的数据监测和双向绑定，欢迎关注《Angular 学习》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。