DoCheck生命周期和onChanges区别

创建Module

直接生成模块和路由然后定义声明的模块

ng g m  one --routing --m=app

组件+模块+路由+指向的声明路径

ng g m two --route=home  --m=app

生命周期 DoCheck 和 onChanges 的区别

当我们传入数组或者对象的时候,我们会发现子组件的onChanges 检测不到变化

这时候我们可以用DoCheck 来监控变化了

父组件,当点击的时候给父组件

//ts
export type objType = {
  name?: string,
  age?: number
}

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.less']
})
export class TwoComponent implements OnInit {

  arr: Array<string | number> = ['a', 'b', 'c'];
  obj: objType = {
    name: 'xxx',
    age: 0
  }
  i:number = 0;
  constructor() { }

  ngOnInit(): void {
  }

  clickMethod(){
    this.arr.push(this.arr.length);
    this.obj.age = ++this.i;
  }
}

<!-- Html -->
<button (click)="clickMethod()">++</button>
<app-user [sex]="arr" [videos]="obj"></app-user>

子组件

  @Input('sex') sex!: Array<string | number>;
  @Input('videos') videos!: objType;
  constructor() { }
  ngDoCheck(): void {
    console.log(this.videos);
  }

  ngOnChanges({sex, videos}: SimpleChanges): void {
    console.log(sex);
    console.log(videos);
    
  }

  ngOnInit(): void {
    console.log(this.videos);
  }

只要运行更改检测，就会调用 ngDoCheck（）

export class UserComponent implements OnInit, OnChanges, DoCheck {

  @Input('sex') sex!: Array<string | number>;
  @Input('videos') videos!: objType;
  constructor() { }
  ngDoCheck(): void {
    console.log(this.videos);
  }

  ngOnChanges({sex, videos}: SimpleChanges): void {
    console.log(sex);
    console.log(videos);
    
  }

  ngOnInit(): void {
    console.log(this.videos);
  }
}

ngOnChanges子组件除了第一次传递的时候能监控到变化，当修改的时候监控不到 ngDoCheck再修改时候能监控到对象的变化。

ngOnChanges 用于 基本数据类型
ngDoCheck 用于引用数据类型