Metode Siklus Hidup Angular Ngonchanges: Panduan Lengkap – Codewithaden

Angular Ngonchanges adalah kait siklus hidup yang dipanggil ketika setiap properti yang terikat data dari perubahan arahan. Misalnya, untuk menanggapi perubahan variabel @input (), gunakan kait siklus hidup ngonchanges (). Ngonchanges () mengambil argumen perubahan tipe sederhana.

Angular Ngonchanges

Ngonchanges () adalah metode panggilan balik sudut bawaan yang dipanggil segera setelah detektor perubahan default memeriksa properti yang terikat data jika setidaknya satu telah berubah. Sebelum tampilan dan konten, anak -anak diperiksa.

interface OnChanges {
  ngOnChanges(changes: SimpleChanges): void
} 

Mari kita pahami ini dengan sebuah contoh.

Angular, secara default, hadir dengan AppComponent . Ini akan bertindak sebagai komponen induk.

Mari kita buat satu komponen lagi yang disebut ChildComponent.

Jadi, sekarang kami memiliki dua komponen.

  1. AppComponent: komponen induk
  2. ChildComponent: Komponen Anak

Kami mendefinisikan properti di dalam komponen induk dan meneruskan properti itu ke komponen anak, dan itu akan menerima properti itu menggunakan arahan @input.

Kami memodifikasi nilai properti dari komponen orang tua dan anak.

Tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data = 0;
  constructor() {
  }

  ngOnInit(): void {
  }

  changeFromParent(): void {
    this.data += 1;
  }
}
 

Kami mendefinisikan properti kelas yang disebut data Nilai awalnya adalah 0.

Kemudian kami telah mendefinisikan fungsi yang disebut changefromparent (), Yang disebut saat tombol diklik.

Setelah tombol diklik, nilai properti akan dimodifikasi, dan itu akan menambah +1.

Tulis kode berikut di dalam app.component.html mengajukan.


 

Kami telah menggunakan Bootstrap 4 untuk menata komponen kami.

Dalam kode ini, kami telah mendefinisikan acara klik, dan jika dipecat, maka properti data akan bertambah satu, dan didefinisikan di dalam komponen induk.

Kami juga telah mendefinisikan komponen anak yang menerima ParentData sebagai data input dari komponen induk.

Jadi, tulis kode berikut di dalam Child.component.ts mengajukan.

// child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {

  @Input() parentData: any;

  constructor() { }

  ngOnInit(): void {
  }

  changeFromChild(): void {
    this.parentData -= 1;
  }

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

}
 

Anda dapat melihat bahwa kami telah mendefinisikan properti @Input yang menunjukkan kami memiliki data input dari komponen induk.

Kemudian kami telah mendefinisikan dua metode.

  1. changefromchild ()
  2. Ngonchanges ()

Changefromchild () adalah metode yang akan dipanggil ketika kita mengklik tautan dari komponen anak, seperti yang telah kita tetapkan di dalam app.component.ts mengajukan.

Metode ngonchanges () akan dipanggil ketika kita mengubah properti data dari komponen induk. Itu akan mencatat perubahan objek yang formatnya mengikuti.

  1. Value sebelumnya
  2. nilai sekarang
  3. FirstChange (Benar Pertama kali Ngonchanges disebut)

Instance Simplechanges terlihat seperti berikut.

class SimpleChange {
  constructor(previousValue: any, currentValue: any, firstChange: boolean)
  previousValue: any
  currentValue: any
  firstChange: boolean
  isFirstChange(): boolean
} 

Setiap kali Ngonchanges () dipanggil, instance Simplechanges menangkap ParentData.

Changefromchild () tidak akan memanggil Ngonchanges ().

Changefromparent () akan memanggil Ngonchanges ().

Ketika ngonchanges () dipanggil, contoh ini mencatat contoh Simplechanges.

Keluaran

Angular

Jika Anda menekan Ubah dari orang tua Tautan, itu akan menambah data dengan 1, dan juga akan mencatat objek perubahan.

Jika Anda menekan Berubah dari anak Tautan, itu akan mengurangi data dengan 1.

Itu Simplechanges Instance terlihat seperti berikut.

Kesimpulan

Gunakan Ngonchanges Hook kapan pun Anda ingin mendeteksi perubahan dari variabel yang dihiasi oleh @Memasukkan .

Ingatlah bahwa hanya perubahan dari komponen induk yang akan memicu fungsi ngonchanges ().

Juga, ingatlah bahwa perubahan dari orang tua masih memperbarui nilai anak bahkan tanpa menerapkan ngonchange.

Ngonchange menambahkan manfaat melacak perubahan tersebut dengan nilai sebelumnya dan saat ini.

Itu untuk Ngonchanges Angular ().

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *