lifelong learner — urip iku urup, currently working on accenture.

Ionic navigasi – root navigation part 4 (final)

0
Degananda.com -

Ulasan ini merupakan bagian terahir(4) dari tutorial mengenai ionic navigasi. Sebelum anda membaca ulasan ini sebaiknya anda mengikuti ulasan satu hingga empat mengenai ionic navigasi karena seluruh materi yang digunakan pada bagian empat ini berasal dari part satu hingga part ketiga.

Selayang pandang

Navigasi pada ionic menggunakan metode stack. Pada ulasan satu hingga tiga mengenai ionic navigation kita telah membuat beberapa tipe navigasi. Pertama dalah navigasi menggunakan navCtrl. Kedua navigasi menggunakan nav (sidemenu) dan ketiga adalah navigasi menggunakan tabs. Hal penting yang perlu digaris bawahi adalah navigasi pertama dan kedua (nav&navCtrl) berada pada stack yang sama. Sedangkan navigasi dengan menggunakan tabs menggunakan stack yang berbeda. Problem yang muncul adalah kedua navigasi tersebut berbeda dan rawan akan terjadinnya bug navigasi meski ionic sendiri mensupport multiple stack navigation.

pada ionic dapat memiliki lebih dari satu navigation stack

Pada ulasan ini akan dibahas mengenai root navigation dengan tujuan untuk menghindari bug yang muncul akibat adannya multiple stack navigation. Sebelum membahas mengenai root navigation dibawah ini adalah gambar yang menjelaskan mengenai daftar halaman aplikasi yang telah kita buat dari tutorial navigasi part 1 hingga 3 beserta tujuan navigasinnya / routing stack. Kita akan menggunakan gambar tersebut untuk mempelajari mengenai root navigation.

kita memiliki total empat buah komponen pages yakni page-listnote, page-note, form-note dan page-details. Navigasi yang digunakan sangat sederhana yakni dari page-listnote akan menuju ke halaman page note melalui sebauah tombol yang akan mengeksekusi fungsi push pada modul navCtrl. Pada pagenote terdapat dua buah tab yang mengakses page form-note dan juga page-details. Form-note pada tab tersebut nantinnya akan digunakan untuk menedit data note sedangakan page details untuk menampilkan detail dari note. Sehingga terdapat dua buah stack disini yakni :

  1. stack 1(root navigation stack) : navCtrl page-listnote -> pagenote
  2. stack 2 : internal tabs -> form-note/page-details

yang perlu diketahui adalah stack yang digunakan modul navCtrl dan tabs berbeda. Sedangkan pada sidemenu kita memiliki satu buah navigasi sederhana seperti ditunjukan di gambar dibawah ini.

tombol tambahnote pada sidemenu akan melakukan navigasi melalui modul nav ke form-note dan ini masih sama dengan stack 1. Sehingga total kita memiliki dua buah stack navigasi sesuai dua bagan diatas. Sehingga stack yang kita miliki adalah (berdasarkan bagan 1 dan 2 diatas).

  1. stack 1(root navigation stack) : navCtrl page-listnote -> pagenote + sidemenu (tombol tambah note) -> formnote
  2. stack 2 : internal tabs -> form-note/page-details

dua buah stack navigasi yang berbeda akan memunculkan problem / bug. Jika kita mengakses form-note melalui page-listnote(bukan dari sidemenu) lalu pada form-note kita memiliki sebuah tombol back yang jika ditap / klik akan mengeksekusi fungsi pop() pada modul navCtrl. Fungsi tersebut akan menghasilkan error sebagai berikut ini :

pesan yang muncul adalah “navigation stack needs at least one root page”. Hal ini berbeda jika kita mengakses tombol back yang kita buat dengan menggunakan fungsi pop (bukan tombol yang secara otomatis tergenerate pada navbar) melalui sidemenu. Maka pesan diatas tidak akan muncul.

mengapa hal itu bisa terjadi ? jawabannya adalah :

  1. ketika kita mengakses form-note melalui page-listnote maka form-note akan ditampilkan dalam bentuk tab. Sehingga form-note dan page sebelumnya yakni page-listnote menjadi berbeda navigation stack. Oleh karena itu ketika kita tap/klik tombol back yang mengeksekusi fungsi pop() akan muncul error diatas.
  2. Berbeda dengan form-note yang kita akses melalui sidemenu tidak akan menghasilkan error karena page sebelumnya (page-listnote) dan form-note berada pada navigation stack yang sama.

itulah dua alasan mengapa kejadian diatas dapat terjadi. Pertanyaan selanjutnya adalah how to fix this condition ? cara yang paling mudah adalah hapus tombol back yang mengeksekusi fungsi pop() dan gunakan tombol back pada navbar. namun terdapat cara yang paling benar untuk mengatasi hal tersebut.  yakni kita akan melakukan pop terhadap navController parent. Kode yang digunakan adalah sebagai berikut

  goBack(){
    // mengakses parent (object tab nya)
    console.log(this.navCtrl.parent.parent.pop());
  }

fungsi pop akan dilakukan dari navController parent.parent karena hanya parent.parent yang berada di root navigation stack atau dengan kata lain yaitu object dari page-note itu sendiri. Done maka , sekarang tombol back yang kita buat dengan metode pop() tersebut dapat berjalan dengan baik. Itulah pembahasan mengenai root navigation stack yang perlu digaris bawahi adalah :

  1. tidak dapat melakukan pop pada navigation stack yang berbeda.
  2. gunakan parent dari navcontroller untuk mengakses navigation stack sehingga dapat melakukan fungsi pop.