onChanges钩子使用

该钩子在父组件初始化或者修改子组件的不可变对象输入参数时被调用

首先理解两个概念：

1.可变对象:

在js中，对象是可变的

例如：

var user={
    name:"jerry";//在对象中创建了一个值为jeery的name对象
  }
  user.name="honny";//给name赋值一个新的值。这个时候并不会个对象name分配新的内存地址。

而是在原来的地址上修改了原来的值

2.不可变对象：

在js中字符串是不可变的，也是说当一个字符串在内存中被创建后，他的值永远是不变的；

例如

var greeting="hello";//创建一个值为hello的字符串
greeting="hello xiaopang"//在内存中创建一个值为hello xiaopang的新的字符串，它并没有改变第一个字符串的值只是目前内存中存在两个字符串
// 对于greeting这个变量来说是可变的，他的值从内存中的hello字符串指向了
// 字符串hello xiaopang

可变不可变在于是否分配了新的内存地址

接下来看一个例子

1.子组件的模板：显示

<p>
  我是子组件
</p>
<p>问候语{{greeting}}</p>
<p>姓名{{user.name}}</p>
<p>消息：<input [(ngModel)]="message"></p>

2.子组件的component三个参数，一个输入属性装饰的可变对象参数，一个输入属性装饰的不可变对象参数。一个本地不可变参数

import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit,OnChanges {


  @Input()
greetig:string;
@Input()
user:{name:string};
message:string="初始化";
  constructor() { }

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

}

3.父组件的component；顶一个一个可变对象参数，一个不可变对象参数

greeting:string="hello";
user:{name:string}={name:"tom"};

4.父组件的模板 将两个值通过输入属性传递给子组件

<p>我是父组件</p>
<div>问候<input type="text"  [(ngModel)]="greeting" />
  姓名<input type="text"  [(ngModel)]="user.name"/>
</div>
<div></div>
<app-child [greetig]="greeting" [user]="user "></app-child>

效果：

1.当页面初始化之后，自组件接收到了父组件的值，触发了第一次onchanges钩子

2.当修改父组件的不可变属性greeting时，再次触发了onchanges钩子，并且没修改一次触发一次

3.修改父组件的可变属性name的时候不会触发onchangges钩子

结果：get到的重点

触发Onchanges钩子的条件是

父组件初始化子组件时，或者修改子组件的输入属性中的不可变对象输入参数时

1.初始化或者修改子组件

2.必须是修改输入属性

3.修改的输入属性必须是不可变对象

也就是说父组件，不可变对象，输入属性，修改