访问 ngOnChanges 中的最新输入属性答案

【问题标题】：access latest input properties in ngOnChanges访问 ngOnChanges 中的最新输入属性
【发布时间】：2020-03-04 20:40:43
【问题描述】：

Angular 官方文档说：

"ngOnChanges 是一个生命周期钩子，当指令的任何数据绑定属性发生更改时调用它。定义一个 ngOnChanges() 方法来处理更改。

有点不清楚是否意味着更新/最新的输入属性实际上在 ngOnChanges 生命周期方法中可用。于是我做了一个简单的实验：

//trmplate.html
<p [mydirective] = "GetFirstStudent().Name"></p>

其中 Name 是组件中的一个属性，我将第一个人的名字设置为“Michael”。

所以在指令类中，mydirective 选择器：

@Directive({
    selector: "[mydirective]"
})
export class CustomDirective{
   ...
    @Input("mydirective")
    personName: string;

    ngOnChanges() {
       console.log(personName);
    }
}

所以我刷新浏览器，控制台确实有以下输出：

迈克尔

所以这证实了在 ngOnChanges 中，我可以访问最新的输入属性。

我的理解正确吗？

【问题讨论】：

你问ngOnChanges 是否有效？如果是这样，答案是肯定的。
使用 ngOnChanges(changes : SimpleChanges) 。 changes.personName.currentValue 将存储当前值
您的问题到底是什么？您通过证明最新值实际上是 Michael 基本上回答了您问自己的问题，所以我不确定您在这里寻找什么。

标签： angular angular2-directives

【解决方案1】：

你可以在这里找到工作示例StackBlitz Link

ngOnChanges(change: SimpleChanges){
  console.log(change['valueFromParent']);
  if (change['valueFromParent'].currentValue === undefined ){
    this.currentStatus = 'Not Change Detected';
  }
 else if(change['valueFromParent'].currentValue === true){
   this.currentStatus = change['valueFromParent'].currentValue
 }
 else if( change['valueFromParent'].currentValue === false) {
   this.currentStatus = change['valueFromParent'].currentValue
 }
}

【讨论】：

【解决方案2】：

像这样：

ngOnChanges(changes: SimpleChanges) {
   console.log(changes.personName);
   if (changes.personName)
   console.log(changes.personName.currentValue)
}

【讨论】：

【解决方案3】：

您的实现适用于字符串和整数，因为它们是按值传递的，但不适用于数组和对象输入，因为它们是按引用传递的

SimpleChanges 参数用于获取输入属性的新值和以前的值

ngOnChanges(changes: SimpleChanges) {
 for (let propName in changes) {  
  let change = changes[propName];
  let curVal  = change.currentValue;
  let prevVal = change.previousValue;
  console.log(curVal);
  console.log(prevVal);
 }
}

【讨论】：