Angular Academy · Pelajaran

ngOnChanges dan Perubahan Input

Bertindak balas terhadap perubahan dalam sifat input.

Pelajaran 2 daripada 413 langkah

ngOnChanges dan Perubahan Input ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Bertindak Balas terhadap Perubahan Input

Cangkuk OnChanges membolehkan komponen bertindak balas setiap kali sifat @Input berubah. Angular memanggil ngOnChanges sebelum ngOnInit dan pada setiap kemas kini input.

Melaksanakan OnChanges

Laksanakan antara muka OnChanges dan tambahkan kaedah ngOnChanges yang menerima objek SimpleChanges.

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

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

Objek SimpleChanges

SimpleChanges ialah peta yang menggunakan nama input sebagai kunci. Setiap entri ialah SimpleChange dengan currentValue, previousValue dan firstChange.

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

Mengesan Perubahan Pertama

Bendera firstChange bernilai true pada kali pertama input ditetapkan. Gunakannya untuk membezakan pemulaan daripada kemas kini seterusnya.

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

Bertindak Balas terhadap Input Tertentu

Sentiasa semak bahawa kunci itu wujud sebelum membacanya kerana tidak semua input berubah pada setiap kitaran.

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

Pengesanan Berasaskan Rujukan

ngOnChanges dicetuskan apabila berlaku perubahan rujukan bagi objek dan tatasusunan. Mengubah objek yang dihantar sebagai input TIDAK akan mencetuskannya.

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

Turutan dengan ngOnInit

Semasa penciptaan, ngOnChanges dijalankan dahulu dengan input awal, kemudian ngOnInit. Selepas itu, ngOnChanges dijalankan lagi setiap kali input berubah.

Membandingkan Nilai Lama dan Baharu

Kegunaan yang lazim ialah bertindak balas hanya apabila nilai benar-benar berbeza, contohnya memuatkan semula data apabila input id berubah.

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

Penaipan untuk Keselamatan

Anda boleh membaca nilai daripada changes atau terus daripada sifat komponen; selepas ngOnChanges, sifat itu sudah mengandungi nilai semasa.

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

Bila Tidak Menggunakan OnChanges

Untuk keadaan terbitan daripada satu input, getter atau nilai terhitung mungkin lebih kemas. Simpan ngOnChanges untuk kesan sampingan yang mesti dijalankan apabila input dikemas kini.

Beberapa Input Serentak

Jika beberapa input berubah dalam kitaran yang sama, ngOnChanges dipanggil sekali dengan kesemuanya hadir dalam peta SimpleChanges.

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

Semakan Ringkas

Uji pemahaman anda tentang OnChanges.

Jawab dalam pelajaran interaktif

Imbas Kembali

Cangkuk OnChanges bertindak balas terhadap perubahan input melalui peta SimpleChanges yang mengandungi currentValue, previousValue dan firstChange. Ia dicetuskan oleh perubahan rujukan, jadi gunakan kemas kini yang tidak mengubah data sedia ada.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “ngOnChanges dan Perubahan Input” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “ngOnChanges dan Perubahan Input”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “ngOnChanges dan Perubahan Input”?

Bertindak balas terhadap perubahan dalam sifat input. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “ngOnChanges dan Perubahan Input” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy