Angular中的ngOnchange()的汇总

ngOnChanges() 是 Angular 中的一个生命周期钩子函数，它在组件或指令的 输入属性（@Input()）发生厘革时被调用。这个钩子可以资助你检测输入数据的厘革，并对数据厘革做出反应。
1.监听的对象

  ngOnChanges() 监听的是 通过 @Input() 装饰器通报给子组件的属性。换句话说，任何标志为 @Input() 的属性都会被 ngOnChanges() 监听。具体来说，它会监听通过父组件通报给子组件的属性厘革。
2.触发机会

  ngOnChanges() 会在 输入属性的值厘革时被调用，且每次厘革都会通报给钩子一个 SimpleChanges 对象，此中包罗了该输入属性的前后值。

• 第一次调用：在组件初始化时，如果有输入属性，ngOnChanges() 会在组件的构造函数和 ngOnInit() 之前被调用。
  
• 后续调用：每次输入属性的值发生厘革时，ngOnChanges() 会被再次调用。
  

3.参数：SimpleChanges

   ngOnChanges() 的参数是一个 SimpleChanges 对象，它是一个字典对象，包罗了全部发生厘革的输入属性。每个输入属性的厘革信息是一个 SimpleChange 对象，它包罗以下属性：

• previousValue：厘革前的值。
  
• currentValue：厘革后的值。
  
• firstChange：一个布尔值，表现该输入属性是否是第一次厘革。
  
• 示例:
  2. ngOnChanges(changes: SimpleChanges): void {
  3.   if (changes['inputProp']) {
  4.     const previousValue = changes['inputProp'].previousValue;
  5.     const currentValue = changes['inputProp'].currentValue;
  6.     const isFirstChange = changes['inputProp'].firstChange;
  7.     console.log(`inputProp changed from ${previousValue} to ${currentValue}`);
  8.     console.log(`Is this the first change? ${isFirstChange}`);
  9.   }
  10. }

  复制代码

4.语法

2. ngOnChanges(changes: SimpleChanges): void {
3.   // 处理属性变化
4. }

复制代码

5.示例代码

       假设有一个父组件 ParentComponent 和一个子组件 ChildComponent，父组件向子组件通报输入属性。
父组件：

2. @Component({
3.   selector: 'app-parent',
4.   template: `
5.     <app-child [inputProp]="parentData"></app-child>
6.     <button (click)="changeData()">Change Data</button>
7.   `
8. })
9. export class ParentComponent {
10.   parentData = 'Hello';
12.   changeData() {
13.     this.parentData = 'Hello, Angular!';
14.   }
15. }

复制代码

子组件：

2. @Component({
3.   selector: 'app-child',
4.   template: `<p>{{ inputProp }}</p>`
5. })
6. export class ChildComponent implements OnChanges {
7.   @Input() inputProp: string;
9.   ngOnChanges(changes: SimpleChanges) {
10.     if (changes['inputProp']) {
11.       const previousValue = changes['inputProp'].previousValue;
12.       const currentValue = changes['inputProp'].currentValue;
13.       const firstChange = changes['inputProp'].firstChange;
14.       console.log(`inputProp changed from ${previousValue} to ${currentValue}`);
15.       console.log(`Is this the first change? ${firstChange}`);
16.     }
17.   }
18. }

复制代码

6.剖析：

• 当 ParentComponent 中的 parentData 发生厘革时，ChildComponent 中的 inputProp 将触发 ngOnChanges() 钩子。
  
• SimpleChanges 对象中将包罗 inputProp 属性的厘革信息，此中包罗前一个值、当前值和是否为初次厘革的信息。
  

7.使用场景

• 相应输入厘革：当须要在输入数据发生厘革时做一些额外处理惩罚，比方重新盘算、重新加载数据等。
  
• 优化性能：可以在数据厘革时实行优化使用，比方克制不须要的 API 调用。
  
• 数据监控：在多个输入属性同时厘革时，使用 ngOnChanges() 可以监控差别输入的厘革并做出相应。
  

8.注意事项

• ngOnChanges() 会在每次输入属性厘革时被调用，因此如果输入属性频仍厘革，ngOnChanges() 也会频仍触发，大概影响性能。
  
• 如果组件的输入属性没有厘革，ngOnChanges() 不会被触发。
  
• ngOnChanges() 仅在 @Input() 属性厘革时触发，不会监控其他范例的厘革（比方，组件内部的局部状态厘革）。
  

总结：

   ngOnChanges() 监听的是组件的 输入属性（@Input()），每当父组件通报给子组件的输入属性发生厘革时，ngOnChanges() 会被触发并吸收一个 SimpleChanges 对象，包罗全部厘革的输入属性的具体信息。

• 监听对象：@Input() 属性。
  
• 厘革内容：父组件通报给子组件的数据厘革。
  

附加阐明：为什么有个时间可以吸收到 currentValue 和 previousValue 都是 undefined 的情况？这种情况不是应该没有厘革嘛？为什么可以检测到？

        在 Angular 中，如果你在 ngOnChanges() 中看到 currentValue 和 previousValue 都是 undefined，这大概是由于一些特定的场景或代码逻辑导致的。下面是大概的分析：
1. 组件初始化时的举动

ngOnChanges() 会在 组件初始化时触发一次，特殊是在组件的输入属性第一次被设置时。

• 初次输入时，Angular 会触发一次 ngOnChanges()，纵然没有任何显式的厘革。
  
• 在这个第一次触发时，previousValue 和 currentValue 大概会是 undefined，由于此时 Angular 并没有从父组件通报任何值到子组件，大概在组件构造函数中初始化时，输入属性还没有赋值。
  

举个例子：

2. @Component({
3.   selector: 'app-child',
4.   template: `<p>{{ inputProp }}</p>`
5. })
6. export class ChildComponent implements OnChanges {
7.   @Input() inputProp: string;
9.   ngOnChanges(changes: SimpleChanges) {
10.     // 如果 inputProp 是第一次变化，可能会看到 undefined
11.     console.log(changes['inputProp']);
12.   }
13. }

复制代码

父组件：

2. @Component({
3.   selector: 'app-parent',
4.   template: `<app-child [inputProp]="parentData"></app-child>`
5. })
6. export class ParentComponent {
7.   parentData = 'Initial value';
8. }

复制代码

实行过程：

• 在 ChildComponent 第一次加载时，ngOnChanges() 会被触发。此时 inputProp 大概是 undefined，由于它是第一次吸收到父组件的数据。
  
• ngOnChanges() 会触发一次，纵然父组件的值是初次设置，也会通报 SimpleChanges 对象，inputProp 的 previousValue 和 currentValue 大概都是 undefined，由于 Angular 是在初次赋值时查抄的。
  
• firstChange 会是 true，表现这是第一次赋值。
  

2. 父组件通报的数据为 undefined

        如果父组件通报给子组件的 @Input() 属性值是 undefined，而且这个值发生了厘革，ngOnChanges() 也会触发。在这种情况下，如果通报的数据本身就是 undefined，那么 previousValue 和 currentValue 大概都为 undefined。
比方：

2. @Component({
3.   selector: 'app-parent',
4.   template: `<app-child [inputProp]="parentData"></app-child>`
5. })
6. export class ParentComponent {
7.   parentData = undefined; // 或者 null
8. }

复制代码

        如果父组件的 inputProp 值初始化为 undefined，当子组件的 ngOnChanges() 被调用时，changes['inputProp'] 中的 previousValue 和 currentValue 大概都是 undefined，由于 inputProp 被初始化为 undefined，而且没有显式的初值。

3. 异步数据厘革

        如果输入属性的值是通过异步使用（比如从 API 获取数据）赋值的，ngOnChanges() 大概会在组件初始化时被触发，但值还没有更新。

• 在这种情况下，ngOnChanges() 会先被调用一次，此时输入属性的值大概还没有赋值大概为 undefined。
  
• 当异步数据到达并更新输入属性时，ngOnChanges() 会再次被调用，且这时 SimpleChanges 会包罗有用的值。
  

4. 组件初始化与 ngOnChanges() 的触发机会

        Angular 在组件初始化时会触发 ngOnChanges()，纵然输入属性的初始值是 undefined 大概 null，也会触发一次钩子函数。这时：

• previousValue 大概是 undefined，由于组件初始化时没有值。
  
• currentValue 大概也是 undefined，由于输入属性的初值大概是 undefined 或 null。
  

总结

        当你看到 ngOnChanges() 中的 currentValue 和 previousValue 都是 undefined 时，通常是以下几种情况之一：

• 组件初始化时：当组件第一次被创建并吸收到 @Input() 数据时，Angular 会触发 ngOnChanges()，纵然没有显式的厘革，也会将 previousValue 和 currentValue 都设为 undefined，尤其当输入属性还没有被赋值时。
  
• 父组件的输入值是 undefined：如果父组件通报的 @Input() 值本身是 undefined，那么 currentValue 和 previousValue 也会是 undefined。
  
• 异步赋值：如果输入属性的值是通过异步使用（如 HTTP 哀求）通报的，大概会在初始化时出现 undefined，而在值更新后触发另一次 ngOnChanges()。
  

再次夸大：

        ngOnChanges()不是仅在值厘革时触发，而是在每次输入属性的值发生厘革时都会被触发，包罗从undefined到undefined（即初始绑定时）。换句话说，ngOnChanges()会在 输入属性的生命周期开始时触发，纵然它的值没有厘革，也会触发一次钩子函数。