Siklus Hidup Komponen Sudut dan Berbagai Metodenya Dijelaskan

Diluncurkan pada tahun 2009 oleh Google, Angular adalah kerangka kerja pengembangan JavaScript dengan bahasa pemrograman TypeScript. Ini adalah salah satu kerangka kerja desain paling populer untuk pengembangan aplikasi. Bagian terbaik tentang kerangka kerja Angular adalah bahwa ini adalah aplikasi sumber terbuka. Pengembang menggunakan kerangka kerja Angular untuk membuat aplikasi seluler dan web serta memvisualisasikan data. Untuk pengembangan Angular, pengembang harus mengikuti proses ekstensif yang disebut siklus hidup Angular.

Blog ini membantu Anda memahami siklus hidup Angular dan berbagai metode pengaitnya.

Apa itu Siklus Hidup Sudut?

Siklus kejadian yang diperlukan untuk menjalankan komponen Angular disebut siklus hidup Angular. Komponen Angular adalah blok bangunan aplikasi yang diperlukan untuk UI. Secara sederhana, komponen Angular adalah blok yang bertanggung jawab untuk mengontrol tambalan layar dalam aplikasi Angular. Komponen terdiri dari berbagai properti bersama dengan pemilih, templat, dan gaya. Komponen juga memerlukan metadata untuk pemrosesannya.

Angular melewati langkah-langkah deteksi perubahan yang berbeda untuk melacak perubahan pada properti yang terikat data selama siklus hidup. Siklus hidup Angular dimulai ketika Angular memulai kelas komponen. Ini kemudian mendefinisikan tampilan komponen dan tampilan komponen anak. Menjelang akhir, Angular menghancurkan komponen yang tidak lagi digunakan. Itu juga memanggil berbagai metode kait setelah membuat komponen.

Berbagai kait siklus hidup komponen Angular berfungsi sebagai fungsionalitas dalam kerangka kerja Angular. Setiap metode kait memungkinkan pengembang untuk menjalankan kode yang berbeda selama acara tertentu.

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

Siklus Hidup Komponen Sudut

Semua komponen Angular memiliki siklus hidup yang berbeda yang dibagi menjadi delapan tahap berbeda. Tahapan ini disebut lifecycle hook event yang dapat digunakan secara terpisah pada saat aplikasi. Sebelum siklus hidup dimulai, kita mengeksekusi konstruktor kelas komponen, dan kemudian berbagai peristiwa kait terjadi. Peristiwa kait dari siklus hidup Angular dibagi menjadi dua kategori utama. Satu fase terkait dengan komponen asli sedangkan fase kedua berhubungan dengan anak-anak dari komponen tertentu.

Mari kita memahami berbagai tahap siklus hidup sudut:

• ngOnChanges:- Acara ngOnChanges() terjadi ketika kita mengubah nilai kontrol input di dalam komponen, dan properti terikat dari komponen berubah. Secara sederhana, metode kait ini terjadi setiap kali Angular menyetel atau mengatur ulang properti komponen yang terikat. Selama metode ini, objek 'SimpleCharge' diterima untuk nilai properti saat ini dan sebelumnya.
  Metode kait ini menerima peta data yang diubah dari nilai properti saat ini dan sebelumnya. Peta data dibungkus sebagai SimpleCharge. Penting untuk diingat bahwa peristiwa ini sering terjadi. Oleh karena itu, Anda harus sangat berhati-hati saat melakukan perubahan apa pun selama acara karena dapat memengaruhi kinerja secara signifikan. Anda harus menggunakan metode kait ini hanya jika komponen memiliki input terikat dan Anda mengubah properti terikat komponen. Oleh karena itu, biasanya diperlakukan sebagai metode panggilan balik.
• ngOnInit: - Acara ini digunakan untuk menginisialisasi data dalam suatu komponen. ngOnInit() menginisialisasi komponen atau arahan setelah properti terikat data ditampilkan oleh Angular dan properti input ditetapkan oleh komponen. Tujuan utama ngOnInit() adalah untuk melakukan inisialisasi yang kompleks. Metode hook pertama-tama menggunakan komponen untuk sumber data awal atau variabel lokal menjadi nilai sederhana. Ini kemudian digunakan untuk mengatur komponen setelah Angular mengatur properti input. Acara ngOnInit() biasanya dipanggil setelah ngOnChanges jika komponen memiliki properti terikat. Namun, jika komponen tidak mengandung properti terikat, kita bisa langsung mengeksekusi event ngOnInit(). Anda juga harus ingat bahwa kait ini dipanggil hanya sekali.
• ngDoCheck: - Acara kait ini terjadi setiap kali kita memeriksa properti dari metode input. Acara ngDoCheck merupakan bagian integral dari setiap siklus deteksi perubahan dan dapat digunakan bersama dengan pemeriksaan logika Anda sendiri. Peristiwa ini memfasilitasi pendeteksian perubahan atau algoritme khusus dalam komponen. Metode buku ngDoCheck memungkinkan deteksi perubahan yang tidak dapat dideteksi oleh Angular. Anda dapat memanggil ngDoCheck setelah ngOnChanges untuk setiap deteksi perubahan yang dijalankan. Ini dapat dipicu setelah ngOnInit dijalankan pertama kali, bahkan jika tidak ada perubahan yang dibuat pada properti terikat komponen.
  
• ngAfterContentInit:- Metode tahap kait atau siklus hidup ini mirip dengan ngOnInit karena hanya terjadi sekali selama masa pakai komponen. Anda dapat memicu peristiwa ini satu kali saat Anda harus memeriksa ikatan komponen untuk pertama kalinya. Kami menjalankan acara ini setelah Angular melakukan aktivitas proyeksi konten apa pun di dalam komponen. Dengan kata sederhana, ngAfterContentInit dijalankan ketika ada proyeksi konten eksternal oleh Angular ke dalam tampilan komponen atau tampilan di mana ada arahan. ngAfterContentInit dipanggil Angular segera setelah menjalankan metode ngDoCheck. Metode siklus hidup ini terkait dengan inisialisasi komponen anak.
  
• ngAfterContentChecked:- Tahap hook ini adalah tindakan selanjutnya dari metode ngDoCheck. Seperti namanya, metode ngAfterContentChecked dijalankan setelah Angular mendeteksi perubahan pada konten eksternal yang diproyeksikan di dalam komponen. Acara ini terjadi setelah setiap siklus deteksi perubahan. Itu dipanggil setelah ngAfterContentInit() dan setiap ngDoCheck() berikutnya. Seperti ngAfterContentInit, ngAfterContentChecked juga dikaitkan dengan inisialisasi komponen turunan.
  
• ngAfterViewInit:- ngAfterViewInit dipicu setelah inisialisasi tampilan komponen selesai. Itu hanya dipanggil sekali setelah metode siklus hidup ngAfterContentChecked() . Metode kait ini hanya digunakan untuk komponen dan bukan komponen anak.
  

  Kursus & Artikel Populer tentang Rekayasa Perangkat Lunak

  Program Populer
  Program PG Eksekutif dalam Pengembangan Perangkat Lunak - IIIT B	Program Sertifikat Blockchain - PURDUE	Program Sertifikat Keamanan Siber - PURDUE	MSC dalam Ilmu Komputer - IIIT B
  Artikel Populer Lainnya
  Gaji Cloud Engineer di AS 2021-22	Gaji Arsitek Solusi AWS di AS	Gaji Pengembang Backend di AS	Gaji Pengembang Front End di AS
  Gaji pengembang web di AS	Pertanyaan Wawancara Scrum Master pada tahun 2022	Bagaimana Memulai Karir di Keamanan Cyber ​​pada tahun 2022?	Pilihan Karir di AS untuk Mahasiswa Teknik

• ngAfterViewChecked:- Siklus hidup ini dipanggil setelah Angular menyelesaikan deteksi atau tampilan pemeriksaan komponen atau komponen anak. Meskipun metode ngAfterViewChecked dipanggil setelah metode ngAfterViewInit, metode ini dijalankan setelah setiap tahap siklus hidup ngAfterContentChecked() berikutnya. Metode kait ini hanya terkait dengan komponen sudut .
  
• ngOnDestroy:- Metode kait ngOnDestroy() dijalankan sebelum Angular menghancurkan komponen yang tidak lagi diperlukan. Metode siklus hidup ini melepaskan peristiwa dan membantu menghindari kebocoran memori. Itu juga berhenti berlangganan yang dapat diamati. Kami memanggil acara ini hanya sekali sebelum menghapus komponen. Metode kait ini berfungsi sebagai pembersihan sebelum Angular menghancurkan komponen.

Antarmuka dalam Siklus Hidup Sudut

Siklus hidup sudut biasanya didefinisikan melalui kelas komponen. Namun, antarmuka juga dapat digunakan untuk mendefinisikan kelas komponen Angular karena berbagai metode kait sudah memiliki antarmuka TypeScript terkait. Kami biasanya memahami antarmuka sebagai karakteristik yang membantu mengidentifikasi berbagai metode dan properti terkait. Meskipun tidak perlu, sangat disarankan untuk mengimplementasikan antarmuka dalam siklus hidup Angular. Tujuan dari setiap antarmuka adalah untuk mendefinisikan prototipe untuk metode kait. Antarmuka diberi nama dengan awalan 'ng'.

Kesimpulan

Komponen sudut didasarkan pada pemrograman TypeScript. Oleh karena itu, perlu mengetahui dasar-dasar pemrograman TypeScript sebelum menerapkan metode hook siklus hidup sudut. Penting juga untuk mempelajari dasar-dasar desain aplikasi Angular, proses metode siklus hidup, dan pengetahuan tentang metode kait mana yang akan digunakan.

Jika Anda berencana untuk mengejar karir dalam pengembangan aplikasi Angular, Anda harus memiliki pengetahuan mendalam tentang seluruh proses dan fungsi berbagai metode kait. Selain itu, karena Angular adalah kerangka kerja pengembangan javascript, Anda harus mempelajari bahasa pemrograman Java. Program PG Eksekutif upGrad dalam Pengembangan Perangkat Lunak adalah pilihan yang sangat baik untuk mempelajari tentang pengembangan aplikasi Angular dari awal.