angular知识点--组件生命周期钩子（ngOnChanges）

碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！

---

ngOnChanges

1. 父组件在初始化或修改子组件输入参数时被调用。简单的说就是在组件输入值发生变化时触发的事件
2. 该方法接收一个SimpleChanges对象，包含当前值和变化前的值
3. 该方法在ngOnInit之前，或者数据绑定输入属性的值变化触发
4. 下面举例需要理解一下js中可变对象和不可变对象（链接在文末）

第一步：在父组件定义好“问候语”变量和“user”对象并传给子组件test

1. 在父组件中双向绑定变量

// html

<div class="body">
   <h2>我是父组件</h2>
   <p>问候语：<input type="text" [(ngModel)]="greetings" /></p>
   <p>姓名：<input type="text" [(ngModel)]="user.name" /></p>
   <app-test [user]="user" [greetings]="greetings"></app-test>
</div>

// ts
export class ProductComponent implements OnInit {

  greetings: string = "hello";
  user: { name: string } = { name: "Tom" }

  constructor(
  ) { }

  ngOnInit() {
  }

}

第二步：在子组件中接收并显示父组件传过来的值

1. 在子组件中实现ngOnChanges钩子，在控制台输出钩子中changes的值可查看输入属性值变化
2. ngOnChanges在父组件初始化的时候也会被调用
3. 当输入属性可变对象值被改变时，ngOnChanges就会被调用，控制台可以看到被调用的改变值
4. 非输入属性被改变钩子不会被调用（message）

// html

<div class="bg">
  <h2>我是子组件</h2>
  <p>问候语：{{greetings}}</p>
  <p>姓名：{{user.name}}</p>
  <p>消息：<input type="text" [(ngModel)]="message" /></p>
</div>

// ts
export class TestComponent implements OnInit, OnChanges {

  @Input() greetings: string;
  @Input() user: { name: string };

  message: string = "初始化消息";

  constructor() {
  }

  ngOnChanges(changes:SimpleChanges): void {
    console.log("changes", JSON.stringify(changes,null,2))
  }

  ngOnInit() {
  }

}

效果：

总结:

1. 初始化组件时，钩子就被调用了一次，可以观察一下值，是默认的值
2. 当输入属性“hello”被改变时就会触发钩子，因为是可变对象，在控制台可以看到当前值和改变之前的值
3. 当输入属性“Tom”改变时不会触发钩子，因为是不可变对象
4. message不是输入属性改变时也不会触发钩子

---

相关链接：
js可变对象和不可变对象