TypeScript - @Input değer değişikliğini nasıl yakalayabiliriz

Bu girişe sahip bir bileşenim var:

@Input() list: Array<string>

Üst bileşen bu giriş değerini değiştirdiğinde bunu nasıl yakalayabilirim?

Cevap #1

ngDoCheck'i, diziye güncellemeler (ekleme ve/veya çıkarma) olduğunda manuel olarak tespit etmek için uygulayabilirsiniz. Varsayılan olarak Angular2 bu durumu algılamaz çünkü içeriğe değil, referanslara göre çalışır.

@Component({
  (...)
})
export class SomeComponent implements DoCheck {
  @Input() list: Array<string>;

  constructor(private differ:KeyValueDiffer) {
  }

  ngDoCheck() {
    var changes = this.differ.diff(this.list);
    if (changes) {
      changes.forEachAddedItem(r => {
        // element added in the input array
      });
      changes.forEachRemovedItem(r => {
        // element removed in the input array
      });
  }
}

ngFor yönergesi bu mekanizmaya dayanır.

Bu plunkr'a bakın: http://plnkr.co/edit/LVQqpjbLENZ7AZ2a6OTt?p=preview.

Cevap #2

OnChanges'i Uygula

ngOnChanges(changes) {
  console.log(changes);
}

ngOnChanges, yalnızca değer dışarıdan Angular bağlamasıyla değiştirildiğinde çağrılır.

Eğer kod başka yollarla değiştirildiğinde çalıştırmak istiyorsanız, ayrıca şöyle bir getter/setter de yapabilirsiniz

_list:Array<string>;
@Input()
set input(newVal:Array<string>) {
  this._list = newVal;
  doSomething();
}

get input()Array<string> {
  return this._list;
}

Bu, yalnızca başka bir dizi _list'e atanırken geçerlidir; aynı dizi üzerinde yapılan değişiklikleri kapsamaz.

İlgili makaleler