Description: Artikel ini membahas bagaimana menggunaka lifecycle hook ionViewWillEnter di Ionic 4 untuk menginit component ketika tombol back ditekan.

Dalam pengembangan aplikasi mobile menggunakan framework Ionic, seringkali kita memerlukan cara untuk menginisiasi kembali komponen sebelumnya ketika tombol back ditekan. Pada awalnya, kita mungkin berpikir bahwa lifecycle hook ngOnInit atau ngAfterViewInit dapat digunakan untuk mencapai tujuan ini. Namun, keberadaan hooks tersebut tidak dijalankan ketika tombol back ditekan.

Untuk mengatasi masalah ini, Ionic menawarkan sebuah lifecycle hook yang disebut ionViewWillEnter. Hook ini dipanggil sebelum komponen diinisiasi pertama kali, sehingga kita dapat menggunakan hook ini untuk menginisiasi kembali komponen sebelumnya ketika tombol back ditekan.

Contoh Penggunaan

Berikut adalah contoh penggunaan lifecycle hook ionViewWillEnter:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
 selector: 'app-example',
 template: '<ion-toolbar color="primary"><ion-buttons slot="start"><ion-back-button></ion-back-button></ion-buttons></ion-toolbar>'
})
export class ExampleComponent {

 constructor(private navCtrl: NavController) {}

 ionViewWillEnter() {
 // Inisiasi kembali komponen sebelumnya
 this.navCtrl.push('PreviousPage');
 }

}

Dalam contoh di atas, kita menggunakan hook ionViewWillEnter untuk menginisiasi kembali komponen sebelumnya ketika tombol back ditekan. Kita juga dapat menggunakan hook ini untuk melakukan beberapa tugas lain yang dibutuhkan.

Lifecycle Hooks di Ionic 4

Berikut adalah daftar lifecycle hooks yang tersedia di Ionic 4:

• constructor
• ionViewDidLoad
• ionViewWillEnter
• ionViewDidEnter
• ionViewWillLeave
• ionViewDidLeave
• ionViewWillUnload

Dengan menggunakan lifecycle hook ionViewWillEnter dan mengerti tentang lifecycle hooks yang tersedia di Ionic 4, kita dapat dengan mudah menginisiasi kembali komponen sebelumnya ketika tombol back ditekan.