angular知识点--组件生命周期钩子(ngOnChanges)

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


ngOnChanges

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

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

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

我是父组件

问候语:

姓名:

// 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

我是子组件

问候语:{{greetings}}

姓名:{{user.name}}

消息:

// 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可变对象和不可变对象

你可能感兴趣的:(angular)