Bagaimana cara mendeteksi ketika nilai @Input () berubah di Angular?

Saya memiliki komponen induk ( CategoryComponent ), komponen anak ( videoListComponent ) dan ApiService.

Saya memiliki sebagian besar ini berfungsi dengan baik yaitu setiap komponen dapat mengakses json api dan mendapatkan data yang relevan melalui yang bisa diamati.

Saat ini komponen daftar video baru saja mendapatkan semua video, saya ingin memfilter ini untuk hanya video dalam kategori tertentu, saya mencapai ini dengan meneruskan kategoriId ke anak melalui @Input().

CategoryComponent.html

<video-list *ngIf="category" [categoryId]="category.id"></video-list>

Ini berfungsi dan ketika kategori induk CategoryComponent berubah maka nilai CategoryId akan dilewati, @Input()tetapi saya kemudian perlu mendeteksi ini di VideoListComponent dan meminta kembali array video melalui APIService (dengan CategoryId baru).

Di AngularJS saya akan melakukan $watchpada variabel. Apa cara terbaik untuk menangani ini?

Sebenarnya, ada dua cara untuk mendeteksi dan bertindak ketika input berubah dalam komponen anak di angular2 +:

1. Anda dapat menggunakan metode siklus hidup ngOnChanges () seperti juga disebutkan dalam jawaban yang lebih lama:

    @Input() categoryId: string;

    ngOnChanges(changes: SimpleChanges) {

        this.doSomething(changes.categoryId.currentValue);
        // You can also use categoryId.previousValue and 
        // categoryId.firstChange for comparing old and new values

    }

Tautan Dokumentasi: ngOnChanges, SimpleChanges, SimpleChange
Demo Contoh: Lihat plunker ini

2. Sebagai alternatif, Anda juga dapat menggunakan setter properti input sebagai berikut:

    private _categoryId: string;

    @Input() set categoryId(value: string) {

       this._categoryId = value;
       this.doSomething(this._categoryId);

    }

    get categoryId(): string {

        return this._categoryId;

    }

Tautan Dokumentasi: Lihat di sini .

Contoh Demo: Lihat plunker ini .

PENDEKATAN APA YANG HARUS ANDA GUNAKAN?

Jika komponen Anda memiliki beberapa input, maka, jika Anda menggunakan ngOnChanges (), Anda akan mendapatkan semua perubahan untuk semua input sekaligus dalam ngOnChanges (). Dengan menggunakan pendekatan ini, Anda juga dapat membandingkan nilai input saat ini dan sebelumnya yang telah berubah dan mengambil tindakan yang sesuai.

Namun, jika Anda ingin melakukan sesuatu ketika hanya satu input tertentu yang berubah (dan Anda tidak peduli dengan input lainnya), maka mungkin lebih mudah untuk menggunakan setter properti input. Namun, pendekatan ini tidak menyediakan cara bawaan untuk membandingkan nilai sebelumnya dan saat ini dari input yang diubah (yang dapat Anda lakukan dengan mudah dengan metode siklus hidup ngOnChanges).

EDIT 2017-07-25: DETEKSI PERUBAHAN ANGULAR MUNGKIN MASIH TIDAK KEBAKARAN DI BAWAH BEBERAPA SIRKUMSTAN

Biasanya, deteksi perubahan untuk penyetel dan ngOnChanges akan diaktifkan setiap kali komponen induk mengubah data yang dilewatinya kepada anak, asalkan data tersebut adalah tipe data primitif JS (string, number, boolean) . Namun, dalam skenario berikut, itu tidak akan menyala dan Anda harus mengambil tindakan tambahan untuk membuatnya berfungsi.

1. Jika Anda menggunakan objek atau array bersarang (alih-alih tipe data primitif JS) untuk meneruskan data dari Induk ke Anak, ubah deteksi (menggunakan penyetel atau ngchanges) mungkin tidak diaktifkan, seperti juga disebutkan dalam jawaban oleh pengguna: muetzerich. Untuk solusinya lihat di sini .

2. Jika Anda memutasikan data di luar konteks sudut (yaitu, secara eksternal), maka sudut tidak akan mengetahui perubahan. Anda mungkin harus menggunakan ChangeDetectorRef atau NgZone di komponen Anda untuk membuat sudut menyadari perubahan eksternal dan karenanya memicu deteksi perubahan. Lihat ini .

Gunakan ngOnChanges()metode siklus hidup di komponen Anda.

ngOnChanges dipanggil tepat setelah properti yang terikat data diperiksa dan sebelum tampilan dan konten anak-anak diperiksa jika setidaknya satu dari mereka telah berubah.

Berikut adalah Documents .

Saya mendapatkan kesalahan di konsol serta kompiler dan IDE saat menggunakan SimpleChangestipe pada fungsi signature. Untuk mencegah kesalahan, gunakan anykata kunci dalam tanda tangan sebagai gantinya.

ngOnChanges(changes: any) {
    console.log(changes.myInput.currentValue);
}

EDIT:

Seperti yang ditunjukkan Jon di bawah ini, Anda dapat menggunakan SimpleChangestanda tangan saat menggunakan notasi braket daripada notasi titik.

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['myInput'].currentValue);
}

Taruhan paling aman adalah menggunakan layanan bersama alih - alih@Input parameter. Juga, @Inputparameter tidak mendeteksi perubahan dalam tipe objek bersarang yang kompleks.

Contoh layanan sederhana adalah sebagai berikut:

Service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SyncService {

    private thread_id = new Subject<number>();
    thread_id$ = this.thread_id.asObservable();

    set_thread_id(thread_id: number) {
        this.thread_id.next(thread_id);
    }

}

Component.ts

export class ConsumerComponent implements OnInit {

  constructor(
    public sync: SyncService
  ) {
     this.sync.thread_id$.subscribe(thread_id => {
          **Process Value Updates Here**
      }
    }

  selectChat(thread_id: number) {  <--- How to update values
    this.sync.set_thread_id(thread_id);
  }
}

Anda dapat menggunakan implementasi yang serupa di komponen lain dan semua komponen Anda akan berbagi nilai bersama yang sama.

Saya hanya ingin menambahkan bahwa ada kait Lifecycle lain yang disebut DoCheckyang berguna jika @Inputnilainya bukan nilai primitif.

Saya memiliki Array sebagai Inputsehingga ini tidak memecat OnChangesacara ketika konten berubah (karena pengecekan yang dilakukan Angular adalah 'sederhana' dan tidak dalam sehingga Array masih merupakan Array, meskipun konten pada Array telah berubah).

Saya kemudian menerapkan beberapa kode pemeriksaan khusus untuk memutuskan apakah saya ingin memperbarui tampilan saya dengan Array yang diubah.

  @Input()
  public set categoryId(categoryId: number) {
      console.log(categoryId)
  }

silakan coba menggunakan metode ini. Semoga ini membantu

Anda juga dapat, memiliki yang dapat diamati yang memicu perubahan pada komponen induk (CategoryComponent) dan melakukan apa yang ingin Anda lakukan dalam berlangganan komponen anak. (videoListComponent)

service.ts 
public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1);

-----------------
CategoryComponent.ts
public onCategoryChange(): void {
  service.categoryChange$.next();
}

-----------------
videoListComponent.ts
public ngOnInit(): void {
  service.categoryChange$.subscribe(() => {
   // do your logic
});
}

Di sini ngOnChanges akan selalu memicu ketika properti input Anda berubah:

ngOnChanges(changes: SimpleChanges): void {
 console.log(changes.categoryId.currentValue)
}

Solusi ini menggunakan kelas proxy dan menawarkan keuntungan berikut:

• Memungkinkan konsumen untuk meningkatkan kekuatan RXJS
• Lebih kompak dari solusi lain yang diusulkan sejauh ini
• Jenis huruf lebih aman daripada menggunakanngOnChanges()

Contoh penggunaan:

@Input()
public num: number;
numChanges$ = observeProperty(this as MyComponent, 'num');

Fungsi utilitas:

export function observeProperty<T, K extends keyof T>(target: T, key: K) {
  const subject = new BehaviorSubject<T[K]>(target[key]);
  Object.defineProperty(target, key, {
    get(): T[K] { return subject.getValue(); },
    set(newValue: T[K]): void {
      if (newValue !== subject.getValue()) {
        subject.next(newValue);
      }
    }
  });
  return subject;
}

Jika Anda tidak ingin menggunakan metode og onChange () implement ngOnChange, Anda juga dapat berlangganan perubahan item tertentu dengan event valueChanges , ETC.

 myForm= new FormGroup({
first: new FormControl()   

});

this.myForm.valueChanges.subscribe(formValue => {
  this.changeDetector.markForCheck();
});

the markForCheck () writen karena menggunakan dalam menyatakan ini:

  changeDetection: ChangeDetectionStrategy.OnPush

Anda juga bisa hanya melewatkan EventEmitter sebagai Input. Tidak yakin apakah ini praktik terbaik ...

CategoryComponent.ts:

categoryIdEvent: EventEmitter<string> = new EventEmitter<>();

- OTHER CODE -

setCategoryId(id) {
 this.category.id = id;
 this.categoryIdEvent.emit(this.category.id);
}

CategoryComponent.html:

<video-list *ngIf="category" [categoryId]="categoryIdEvent"></video-list>

Dan di VideoListComponent.ts:

@Input() categoryIdEvent: EventEmitter<string>
....
ngOnInit() {
 this.categoryIdEvent.subscribe(newID => {
  this.categoryId = newID;
 }
}