Как в компоненте отследить изменение @Input переменной?

В Angular есть несколько способов отслеживания изменений в @Input переменных в компонентах. Давайте рассмотрим самые распространенные подходы.

1. Использование ngOnChanges: Angular предоставляет хук жизненного цикла компонента под названием ngOnChanges, который вызывается при изменении @Input переменных. Для использования этого подхода вы должны реализовать интерфейс OnChanges и определить метод ngOnChanges в вашем компоненте. В этом методе вы можете проверить, какая именно переменная изменилась. Например:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '...',
})
export class MyComponent implements OnChanges {
  @Input() myInput: any;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.myInput) {
      console.log('myInput changed');
      console.log(changes.myInput.currentValue);
    }
  }
}

2. Использование get-сеттеров: Вы можете определить get-сеттер для @Input переменной и использовать его для отслеживания изменений. Когда значение @Input переменной меняется, сеттер будет вызываться автоматически. Например:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '...',
})
export class MyComponent {
  private _myInput: any;

  @Input() set myInput(value: any) {
    console.log('myInput changed');
    console.log(value);
    this._myInput = value;
  }

  get myInput(): any {
    return this._myInput;
  }
}

3. Использование ручной проверки: Вы также можете проверить изменение @Input переменной в методе ngOnInit или в другом нужном месте в вашем компоненте. В этом случае вы можете сравнивать текущее значение переменной с предыдущим значением, которое вы сохраните в отдельной переменной. Например:

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '...',
})
export class MyComponent implements OnInit {
  @Input() myInput: any;
  private previousValue: any;

  ngOnInit() {
    this.previousValue = this.myInput;
  }

  ngDoCheck() {
    if (this.myInput !== this.previousValue) {
      console.log('myInput changed');
      console.log(this.myInput);
      this.previousValue = this.myInput;
    }
  }
}

Все эти подходы достаточно просты и позволяют вам отслеживать изменения в @Input переменных в Angular компонентах. Выберите подход, который больше всего соответствует вашим потребностям и предпочтениям.