Siklus Hidup Komponen Sudut: Metode, Berbagai Jenis, dan Antarmuka

pengantar

Platform sisi klien yang memungkinkan pembuatan aplikasi untuk web dan seluler bersifat angular. Itu diperkenalkan pada tahun 2009 oleh Google. Awalnya, platform mendukung Javascript dan HTML, yang diganti dengan Angular TypeScript dan bahasa skrip lainnya.

Banyak versi Angular telah dikembangkan dengan AngularJS ke Angular-7 dan seterusnya. Apa pun versinya, sudut umumnya dibangun dari komponen. Oleh karena itu, memahami komponen penting untuk mendapatkan pemahaman yang jelas tentang pengolahan komponen.

Namun, setiap komponen angular memiliki gaya hidup tertentu di mana setiap tahap siklus hidup angular melewati langkah-langkah inisialisasi hingga langkah-langkah penghancuran.

Artikel ini akan fokus pada peristiwa siklus hidup berbagai komponen sudut.

Metode Siklus Hidup

Komponen dalam angular memiliki siklus hidup yang berbeda dan sejumlah tahapan tertentu yang melaluinya proses inisialisasi hingga penghancuran dilakukan. Tahapan yang berbeda dari komponen disebut sebagai 'peristiwa kait siklus hidup'.

Untuk mengontrol komponen dalam sudut, pengembang dapat menggunakan peristiwa kait pada fase aplikasi yang berbeda. Delapan jenis peristiwa kait siklus hidup hadir yang dapat digunakan pengembang di salah satu komponen sudut. Panggilan fungsi yang sesuai dengan peristiwa siklus hidup tertentu harus ditambahkan oleh pengembang.

Sebuah metode konstruktor harus ada untuk setiap komponen sebagai komponen milik kelas TypeScript. Itu selalu merupakan konstruktor kelas komponen yang dieksekusi terlebih dahulu sebelum eksekusi dari setiap kait siklus hidup sudut . Untuk menambahkan dependensi apa pun, konstruktor dapat digunakan untuk tugas yang diperlukan. Kait siklus hidup sudut dieksekusi dalam urutan tertentu.

Setiap kali ada inisialisasi komponen apa pun di sudut, komponen root dibuat dan disajikan. Pewaris komponen kemudian diproduksi.

Pembagian tahapan siklus hidup terjadi dalam dua fase: fase yang menghubungkan ke komponen dan fase lain yang menghubungkan ke anak-anak komponen.

Baca Juga: Ide Proyek Sudut yang Menyenangkan

Berbagai Jenis Kait Siklus Hidup

1. ngOnChanges –

Peristiwa ini dipanggil setiap kali ada perubahan nilai kontrol input. Perubahan nilai properti yang terikat memicu peristiwa ini. Peta data yang berisi perubahan, yaitu nilai properti sebelumnya dan saat ini dalam SimpleChange.

• Properti
  • Komponen yang memiliki input dapat menggunakan metode.
  • Setiap kali ada perubahan nilai input, metode akan dipanggil.

2. ngOnInit

Setelah inisialisasi komponen atau tampilan properti dari data terikat, kejadian ngOnInit diinisialisasi. Acara ini dipanggil sekali hanya setelah acara ngOnChanges. Oleh karena itu, acara ini terutama bertanggung jawab untuk menginisialisasi data komponen.

• Properti
  • Data dalam komponen diinisialisasi oleh acara ini.
  • Metode ini dipanggil ketika nilai-nilai input ditetapkan.
  • Angular CLI secara default telah menambahkan kait ini ke semua komponennya.
  • Metode ini hanya dapat dipanggil sekali.

3. ngDoCheck

Setelah memeriksa properti input dari komponen sudut, pemicu acara ngDoCheck terjadi. Ini terutama dilakukan untuk mendeteksi atau menindaklanjuti setiap perubahan yang gagal dideteksi oleh sudut. Berdasarkan logika pengembang, pemeriksaan dapat diimplementasikan. Oleh karena itu, penerapan logika atau algoritme perubahan kustom apa pun untuk mendeteksi perubahan dalam komponen apa pun diizinkan oleh peristiwa tersebut.

• Properti
  • Untuk setiap deteksi perubahan, angular menjalankan metode ini.
  • Metode ini dipanggil untuk mendeteksi perubahan.

4. ngAfterContentInit –

Setelah proyeksi konten eksternal dalam tampilan komponen, acara ngAfterContentInit dipanggil. Untuk memeriksa semua binding komponen untuk pertama kalinya, metode ini dijalankan untuk pertama kalinya. Eksekusinya mengikuti segera setelah eksekusi metode ngDoCheck(). Komponen anak biasanya dikaitkan dengan metode ini.

• Properti
• • Awalnya, metode ini dipanggil setelah ngDoCheck.

• • Pekerjaan dilakukan oleh inisialisasi konten.

5. ngAfterContentChecked –

Proyeksi konten eksternal ke dalam komponen diikuti dengan memeriksa konten yang diproyeksikan. Metode ini dipanggil setiap kali check in konten dilakukan melalui mekanisme deteksi perubahan sudut. Itu dieksekusi setelah eksekusi metode ngAfterContentInit(). Juga, metode ini dieksekusi setelah eksekusi ngDoCheck() berikutnya. Hal ini biasanya terkait dengan inisialisasi komponen anak.

• Properti

• • Untuk memulai, metode menunggu penyelesaian ngContentInit.

• • Eksekusi dilakukan setelah ngDocheck.

6. ngAfterViewInit

Dengan inisialisasi komponen sudut dan komponen turunan, metode ngAfterViewInit dipanggil. Setelah eksekusi metode ngAfterContentChecked, metode ngAfterViewInit dipanggil untuk pertama kalinya. Metode ini hanya berlaku untuk komponen sudut.

• Properti

  • Hanya sekali panggilan untuk metode dibuat setelah tampilan komponen diinisialisasi.

7. ngAfterViewChecked –

Tepat setelah metode ngAfterViewInit, metode ngAfterViewChecked dipanggil. Setiap kali metode deteksi perubahan sudut melakukan pemeriksaan atas komponen, metode ngAfterViewChecked akan dieksekusi. Metode ini juga dieksekusi setelah eksekusi ngAfterContentChecked(). Juga, ketika pengikatan arahan komponen anak diubah, metode akan dieksekusi.

• Properti

• • Panggilan dibuat setelah inisialisasi dan pemeriksaan.

• • Pekerjaan metode dimulai setelah selesainya setiap metode ngDocheck.

8. ngOnDestroy

Metode ini dipanggil tepat sebelum penghancuran komponen dengan sudut. Untuk menghindari skenario kebocoran memori, metode ini mampu melepaskan event handler, dan juga berguna dalam berhenti berlangganan observables. Hanya sekali, metode dipanggil untuk menghapus komponen dari DOM.

• Properti

• • Panggilan dibuat tepat sebelum penghapusan komponen dari DOM.

Antarmuka dalam Siklus Hidup Sudut

Kelas komponen dapat digunakan untuk mendefinisikan metode kait siklus hidup sudut . Namun, dengan bantuan antarmuka, metode dapat dipanggil. Nama antarmuka mirip dengan nama metode, menghilangkan awalan "ng". Ini karena adanya antarmuka TypeScript dengan masing-masing metode kait siklus hidup. Misalnya, antarmuka ngOnInit disebut OnInit. Hanya satu peristiwa dari kait siklus hidup yang ditentukan melalui satu antarmuka. Selanjutnya, kompiler tidak menimbulkan kesalahan kompilasi saat antarmuka tidak diimplementasikan.

Contoh:

Sebuah contoh telah ditunjukkan untuk mengimplementasikan kait siklus hidup. Kode yang ditunjukkan di bawah ini akan ditempatkan di file 'app.component.ts'. Sumber

Ini menunjukkan cara memanggil kait siklus hidup ngOnInit.

Contoh menambahkan modul ke repositori 'ng-example' ditunjukkan di bawah ini. Nama modul adalah lifecycle-hooks yang memiliki komponen (baik induk dan anak) untuk contoh 'ngOnChanges' yang disebut contoh perubahan. Untuk perutean ke pengait siklus hidup komponen, perutean ditambahkan ke bilah sisi dan komponen 'contoh perubahan' ditempatkan di dalam komponen itu. Ini menunjukkan komponen induk bersama dengan komponen anak.

Semua metode kait siklus hidup kemudian akan ditambahkan ke kedua komponen bersama dengan nama kait peristiwa yang disebut console.log(). Anak ditambahkan ke pernyataan konsol anak untuk membedakan komponen induk dan anak.

Tampilan komponen induk ditunjukkan di bawah ini.

Sumber

Komponen anak identik tetapi merupakan bagian dari pernyataan console.log.

Menjalankan servis ng akan menunjukkan urutan penembakan acara. Ini menjelaskan urutan metode yang dieksekusi. Inisialisasi komponen, isinya, pengecekan isi, inisialisasi, dan pengecekan komponen anak. Hal ini diikuti oleh deklarasi akhir bahwa tampilan komponen diinisialisasi dan diperiksa.

Baca Juga: Cara Menjalankan Proyek Sudut

Pada langkah berikutnya komponen induk ditambahkan dengan kejadian sederhana di mana beberapa nilai input ke anak dimanipulasi. Untuk ini, tombol ditambahkan ke komponen induk yang ketika diklik akan menambah angka dengan nilai satu. Kenaikan akan diteruskan ke anak sebagai input dan akan ditampilkan.

Sumber

Tampilan html induknya adalah

Input 'num' ditampilkan sebagai:

<h4>{{num}}</h4>

Saat mengklik tombol '+', akan ada pengaktifan peristiwa di mana peristiwa kait siklus hidup akan dieksekusi di atas komponen. Acara 'ngOnChanges' diaktifkan pada anak karena nilai input ke anak terdeteksi oleh 'ngOnChanges'.

Pelajari Kursus Perangkat Lunak online dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.

Kesimpulan

Artikel ini memberikan gambaran umum tentang tahapan komponen sudut. Urutan spesifik dari hasil kait siklus hidup sudut dibahas dan juga penerapan peristiwa tersebut ditampilkan.

Untuk memperluas penerapan komponen perangkat lunak tersebut, Anda dapat melihat kursus upGrad , “ Program PG Eksekutif dalam Pengembangan Perangkat Lunak – Spesialisasi dalam Pengembangan Full Stack ”. Setiap profesional tingkat menengah dalam usia 21 hingga 45 tahun dapat mengikuti kursus yang disertifikasi dari IIIT-Bangalore . Kursus online menawarkan manfaat dari kuliah langsung, pengalaman langsung, status alumni IIIT-B, dan sertifikasi 4 bulan dalam Ilmu Data & Pembelajaran Mesin tanpa biaya. Jika Anda masih ingin mendapatkan pekerjaan impian Anda, ikuti kursus yang memastikan penempatan di industri teratas. Setiap pertanyaan disambut oleh tim kami.