Javascript 如果@Input是一个对象，则不会触发OnChanges&；它的一个属性更新

我想做什么？

我有一个父组件（比如

parent

），它包含两个子组件（比如

child-1

和

child-2

）。当子1中的一个DOM元素值发生更改时，我会将新值指定给对象的一个属性，并将该对象发送给父对象。然后，父对象将传入对象分配给它自己的本地对象，我将其作为输入（

[setupValues]

）传递给子组件2。在子2中，当该

@Input

对象发生任何更改时，我希望将其一个属性分配给一个局部变量（这不会发生，因为即使

@Input

对象中的一个属性发生更改，子2

Onchanges

也不会被触发）

我的源代码（由于简洁，大部分代码已删除）

假设我有一个接口

isetup.ts

export interface ISetups {
  DOB: string;
  DOD: string;
  DOE: string;
}

export class ParentComponent {

  someVariable: string;
  allSetups: ISetups;

  onSetupsChange(allSetups: ISetups) {
    // emitted object from child 1 is assigned to local object
    this.allSetups = allSetups;
  }
}

export class Child1Component {

  @Input() input: string;
  @Output() setupsChanged: EventEmitter<ISetups> = new EventEmitter<ISetups>();
  allSetups: ISetups;
  ownDOB: string;

  emitChange() {
    this.allSetups.DOB = this.ownDOB;
    this.setupsChanged.emit(this.allSetups); //emitting object to parent
  }
}

export class Child2Component implements OnChanges {

  localDOB: string;
  @Input() setupValues: ISetups;

  ngOnChanges(): void {
    console.log("this does not fire if setupValues.DOB changes");
    this.localDOB = this.setupValues.DOB;
  }

}

parent.html的标记如下

<child-1 [input]="someVariable" (setupsChanged)="onSetupsChange($event)">
</child-1>

{{ allSetups.DOB }} <!-- the change is shown correctly here -->

<child-2 [setupValues]="allSetups"></child-2>

在
child-1.html中

<input class="form-control" [(ngModel)]="ownDOB" (blur)="emitChange()" >

<p>{{ localDOB }}</p>

在
child-2.html中

<input class="form-control" [(ngModel)]="ownDOB" (blur)="emitChange()" >

<p>{{ localDOB }}</p>

什么有效？

将属性作为另一个输入直接传递是有效的

<child-2 [DOB]="allSetups.DOB" [setupValues]="allSetups"></child-2>



上述方法很有效，但显然这不是一个好方法&我不想这样做

以上证明，当我单独发送变量时，它会触发
OnChanges
，但当对象中的一个属性发生更改时不会触发

非常感谢您的帮助。
之所以发生这种情况，是因为您对对象的引用没有更改，所以如果在parent.ts中将您的代码更改为此，它应该可以工作。通过这种方式（使用
扩展运算符
）可以创建对象的新实例

onSetupsChange(allSetups: ISetups) {
    // emitted object from child 1 is assigned to local object
    this.allSetups = {...allSetups};
  }

太棒了，谢谢。不熟悉这种语法。您能否提供一个链接或更多关于
…
功能的解释？只是创建一个对象的新实例？还考虑到它会创建一个新实例，它不会产生内存问题吗？@NikhilNanjappa这被称为
扩展运算符
，您可以了解更多关于它的信息，这与您的案例有关。是的，它有效。谢谢。只是有点担心记忆的影响。你有什么想法吗？@NikhilNanjappa不会成为问题，如果它有效，请将其标记为答案，以防其他用户有相同的问题