8.2 - 更新阶段

ngOnChanges

• 当输入属性值发生变化时执行，初始设置时也会执行一次，顺序优于 ngOnInit
• 不论多少输入属性同时变化，钩子函数只会执行一次，变化的值会同时存储在参数中
• 参数类型为 SimpleChanges，子属性类型为 SimpleChange
• 对于基本数据类型来说, 只要值发生变化就可以被检测到

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

  基本数据类型值变化

  <app-child [name]="name" [age]="age"></app-child>
  <button (click)="change()">change</button>

  export class AppComponent {
    name: string = "张三";
    age: number = 20
    change() {
        this.name = "李四"
        this.age = 30
    }
  }

  export class ChildComponent implements OnChanges {
    @Input("name") name: string = ""
    @Input("age") age: number = 0
    ngOnChanges(changes: SimpleChanges) {
        console.log("基本数据类型值变化可以被检测到")
    }
  }

  引用数据类型变化

  <app-child [person]="person"></app-child>
  <button (click)="change()">change</button>

  export class AppComponent {
    person = { name: "张三", age: 20 }
    change() {
        this.person = { name: "李四", age: 30 }
    }
  }

  export class ChildComponent implements OnChanges {
    @Input("person") person = { name: "", age: 0 }
    ngOnChanges(changes: SimpleChanges) {
        console.log("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")
    }
  }

  ngDoCheck

• 主要用于调试，只要输入属性发生变化，不论是基本数据类型还是引用数据类型还是引用数据类型中的属性变化，都会执行

  ngAfterContentChecked

• 内容投影更新完成后执行

  ngAfterViewChecked

• 组件视图更新完成后执行