ngOnChanges如何处理simpleChanges对象

Question

我是angular 5的新手，我正在从官方网站上学习组件交互

ngOnChanges(changes: {[propKey: string]: SimpleChange}) {}

在生命周期的钩子中

ngOnChanges(changes: SimpleChanges) {}

据我所知，SimpleChanges是ngOnChanges作为参数获取的对象，我们可以使用它访问前一个和当前的值。但我不明白以下是如何工作的：

ngOnChanges(changes: {[propKey: string]: SimpleChange}) {}

我也找不到任何好的解释

Answer 1

{[propKey: string]: SimpleChange}

means:具有string类型的键的对象，每个键都与SimpleChange类型的值相关联。

如果您的组件有3个输入a、b和c，并且输入a和c发生变化，则Angular将使用如下所示的参数调用ngOnChanges()：

{
  a: {
    previousValue: ...,
    currentValue: ...,
    firstChange: false
  }
  c: {
    previousValue: ...,
    currentValue: ...,
    firstChange: false
  }
}

Answer 2

这只是ngOnChanges函数中参数的类型sugar。

{[propKey: string]: SimpleChange

上面一行表示参数是一种哈希图，其中键是一个字符串，值是SimpleChange函数的一个实例。

“aaa”只是一个名字，你也可以输入"aaa"，或者"myPropKey“，仍然有效。

请查看哈希图的https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/和搜索