angular代码changes:{[propKey:string]:SimpleChange}解释

在解释标题中的那段代码之前我们得先了解 索引签名 这一概念,因为angular使用的是typescript语法, 索引签名 便是出现在ts接口中的东西

第一次接触”索引”这个概念是再学习数组的时候,比如a[10]或ageMap[“daniel”]

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: String = myArray[0];

上面例子里，我们定义了StringArray接口，它具有索引签名。这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。
所以标题中的代码翻译过来就是: 用 string 去索引,得到一个 SimpleChange;

知道意思后,我们需要知道为什么这么用

ngOnChanges(changes: { [propKey: string]: SimpleChange }) { //当使用string去索引时会得到一个 SimpleChange 类型的返回值
    let log: string[] = [];
    debugger;
    for(let propName in changes) {
      let changedProp = changes[propName];
      let to = JSON.stringify(changedProp.currentValue);
      if(changedProp.isFirstChange()) {
        log.push(`Initial value of ${propName} set to ${to}`);
      } else {
        let from = JSON.stringify(changedProp.previousValue);
        log.push(`${propName} changed from ${from} to ${to}`);
      }
    }
    this.changeLog.push(log.join(', '));
  }

在angular中ngOnChanges监控了两个变化的值,一个是major,另一个是minor,

从这里的图片我们可以看到changes是一个对象,changes[propName]获取到当前的变化元素,我们再对照
“用string去索引,得到一个SimpleChange”便可发现这里的Object是SimpleChange类型

changes: { [propKey: string]: SimpleChange }

changes[propName]