OnChanges не срабатывает, если @Input является объектом и одним из обновлений его свойств

Question

Что я пытаюсь сделать?

У меня есть родительский компонент (скажем, parent), который содержит 2 дочерних компонента (скажем, child-1 и child-2).Когда изменяется одно из значений элемента DOM в дочернем элементе 1, я назначаю новое значение одному из свойств объекта и отправляю объект родительскому элементу.Затем родительский объект назначает входящий объект своему локальному объекту, который я передаю в качестве входных данных ([setupValues]) дочернему компоненту 2.В Child 2, когда есть какое-либо изменение в этом @Input объекте, я хочу присвоить одно из его свойств локальной переменной (чего не происходит, потому что дочерний элемент 2 Onchanges не запускается, даже когда один изсвойства в @Input объект изменился).

Мой исходный код (большинство удалено из-за краткости)

Рассмотрим, у меня есть интерфейс ISetups.ts

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

Разметка 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>

In parent.ts

export class ParentComponent {

  someVariable: string;
  allSetups: ISetups;

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

In child-1.html

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

In child-1.ts

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
  }
}

В child-2.html

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

В child-2.ts

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;
  }

}

Что сработало?

Передача свойства напрямую, как другой вход работал

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

Выше работает, но, очевидно, это не очень хороший способ, и я не хочу этого делать.

Вышеприведенное доказывает, что когда я отправляю переменную самостоятельно, она запускает OnChanges, но не срабатывает, когда изменяется только одно из свойств внутри объекта.

Любая помощьочень ценится.

Answer 1

это произошло потому, что ваша ссылка на объект не изменилась, поэтому, если в ваш parent.ts измените свой код на это, он должен работать.Таким образом (используя spread operator) вы создаете новый экземпляр объекта

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