March 27, 2023

Как обнаруживать изменения в @Input

Способ №1 - ngOnChanges

export class SimpleComponent implements OnChanges {
@Input() id: number;

 ngOnChanges(changes: SimpleChanges) {
  if (!changes.id.firstChange) {
    console.log(changes.id.currentValue);
   }
  }
 }

Суть сводится к проверке объекта changes, получено ли изменение. Сhanges содержит текущее и предыдущее значение.

Способ №2 - использование set и get в параметре.

export class SimpleComponent implements OnChanges {
private _id: number;


@Input() 
set id(value: number) {
 this._id = value;
 }
 
get id(): number {
 return this._id;
 }
}

Тут определяем функцию-сеттер для обнаружения изменений входной переменной. Сеттер всегда будет вызываться первым перед хуком жизненного цикла ngOnchanges.