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.