组件更新阶段

在这个阶段，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。

1. ngOnChanges

   组件的输入属性初始化或者变更的时候调用。(组件有输入属性才会触发ngOnChanges)

   输入属性的值为基础类型：

   xxxxxxxxxx
   <!-- app.component.html -->
   <div>
       <p>
           <label for="">输入名称：</label>
           <input type="text" (keyup)="setValues(namefld,valuefld)" #namefld>
       </p>
       <p>
           <label for="">输入内容：</label>
           <input type="text" (keyup)="setValues(namefld,valuefld)" #valuefld>
       </p>
     
   </div>
   <!-- 组件app-update-test绑定了俩个输入属性 -->
   <app-update-test [name]='name' [value]="value"></app-update-test>
   

   xxxxxxxxxx
   //app.component.ts   
   name:string=''
   value:string=''
   setValues(namefld: HTMLInputElement, valuefild: HTMLInputElement) {
       this.name = namefld.value
       this.value = valuefild.value
   }
   
   

   xxxxxxxxxx
   //update-test.component.ts
   export class UpdateTestComponent implements OnChanges,OnInit {
     @Input() name: string = ''
     @Input() value: string = ''
     constructor() { }
     ngOnChanges(changes: SimpleChanges): void {
       console.log('changes', changes)
     }
     ngOnInit(): void {
       console.log('ngOnInit')
     }
   
   }
   

   SimpleChanges对象保存发生变化的属性。

   格式为{属性名：{ currentValue : 'new value', previousValue : 'old value' , firstChange : true or false}}

   输入的值为引用类型：

   xxxxxxxxxx
   <!-- app.component.html -->
   <button (click)="onChangeInfo()">更改值</button>
   <!-- 组件app-update-test绑定了输入属性 -->
   <app-update-test [info]="info"></app-update-test>
   

   xxxxxxxxxx
   //app.component.ts
   info:{name:string}={name:'张三'}
   onChangeInfo(){
      this.info.name='李四'//不会触发ngOnChanges
      this.info={name:'李四'}//会触发ngOnChanges
   }
   

   xxxxxxxxxx
   //update-test.component.ts
   @Component({
     selector: 'app-update-test',
     templateUrl: './update-test.component.html',
     template: `<p>update-test works!</p>
     <p>{{info.name}}</p>`,
     styleUrls: ['./update-test.component.css']
   })
   export class UpdateTestComponent implements OnChanges, OnInit {
     @Input() info: any = {}
     constructor() {}
     ngOnInit(): void {
       console.log('ngOnInit')
     }
     ngOnChanges(changes: SimpleChanges): void {
       console.log('changes', changes)
     }
   }
   
   

   输入属性初始设置时ngOnChanges会执行一次，顺序优于 ngOnInit。

   当组件没有绑定输入属性的时候，ngOnChanges不会被调用。

   对于引用数据类型来说, 可以检测从一个对象变成另一个对象, 但是检测不到同一个对象中属 性值的变化，但是不影响组件模板更新数据。

2. ngDoCheck

   监控 ngOnChanges() 无法捕获的变更。主要用于调试，只要输入属性发生变化，不论是基本数据类型还是引用数据类型中的属性变化，都会执行。

3. ngAfterContentChecked

   ngAfterContentInit() 和每次 ngDoCheck() 之后调用，内容投影更新完成后执行,。

4. ngAfterViewChecked

   ngAfterViewInit() 和每次 ngAfterContentChecked()之后调用。

实时效果反馈

1.下列描述错误的是：

A 当组件没有绑定输入属性的时候，ngOnChanges不会被调用。

B ngOnChanges钩子函数在ngOnInit之前调用

C ngOnChanges在生命周期中只会被调用一次

D 引用数据类型中的属性变化，也会触发ngDoCheck

答案

1=>C