请求解析Angular 5中SimpleChange与SimpleChanges的区别

Hey there! Let's clear up the confusion between these two Angular core types—they're essential for tracking input property changes in your components, but it's totally normal to mix them up at first.

What is SimpleChange? #

SimpleChange is a class that represents a single input property's change snapshot. Think of it as a little package holding all details about how one specific input on your component has changed. It includes:

• previousValue: The value of the input before the change happened
• currentValue: The new value the input just received
• firstChange: A boolean flag that's true if this is the first time the input is being set (perfect for initial setup logic)
• isFirstChange(): A method that returns the same value as firstChange—a more readable way to check for the initial assignment

Here's a quick practical example:

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

@Component({
  selector: 'app-user-card',
  template: `<p>Current User: {{userName}}</p>`
})
export class UserCardComponent implements OnChanges {
  @Input() userName: string = '';

  ngOnChanges(changes: SimpleChanges): void {
    // Grab the SimpleChange object for the 'userName' input
    const nameChange: SimpleChange = changes.userName;
    
    console.log('Previous username:', nameChange.previousValue);
    console.log('New username:', nameChange.currentValue);
    console.log('First time setting this username?', nameChange.isFirstChange());
  }
}

What is SimpleChanges? #

SimpleChanges is a key-value map where each key is the name of an input property (as a string), and the corresponding value is the SimpleChange object for that input.

When multiple inputs on your component change at once, Angular passes this entire map to the ngOnChanges lifecycle hook. This lets you check all changed inputs in one place, instead of handling them individually.

Example with multiple inputs:

@Component({
  selector: 'app-user-profile',
  template: `<p>{{userName}}, {{userAge}} years old</p>`
})
export class UserProfileComponent implements OnChanges {
  @Input() userName: string = '';
  @Input() userAge: number = 0;

  ngOnChanges(changes: SimpleChanges): void {
    // Loop through all changed inputs
    for (const propName in changes) {
      const changeDetails = changes[propName];
      console.log(`Input "${propName}" changed:`);
      console.log(`  From: ${changeDetails.previousValue}`);
      console.log(`  To: ${changeDetails.currentValue}`);
      console.log(`  Initial assignment? ${changeDetails.isFirstChange()}`);
    }
  }
}

Core Differences at a Glance #

• SimpleChange: Focuses on one single input's change—it's the individual "change record".
• SimpleChanges: Is a collection of multiple SimpleChange objects—it's the bundle of all change records passed to ngOnChanges.

Just remember: ngOnChanges always receives a SimpleChanges object, and you extract individual SimpleChange instances from it when you need details about a specific input's change.

内容的提问来源于stack exchange，提问作者Punit