Saya sibuk dengan peningkatan aplikasi IONIC lama ke IONIC 4 dan semuanya berjalan dengan baik, namun saya tidak dapat menemukan apa pun yang merinci cara meneruskan data dan menggunakan halaman dalam perutean Angular.

Berikut ini cuplikan kode masalahnya:

KODE LAMA

This.navCtrl.setRoot(VendorBookingDashboardProgressPage, { pemesanan: temp });

Dalam kode di atas, Anda akan melihat bahwa booking: temp diteruskan sebagai parameter untuk data tambahan dan VendorBookingDashboardProgressPage adalah halaman referensi untuk dinavigasi.

KODE BARU

This.navCtrl.navigateRoot('vendor/vendor-booking-dashboard-progress'); -- Di sinilah pemesanan: parameter temp tidak ada dan harus disertakan serta URL hard-code di mana referensi halaman sebaiknya disertakan tetapi parameter string diperlukan.

Saya bisa hidup dengan hard-coding URL, tetapi parameternya adalah kunci dan perlu tahu bagaimana ini bisa dicapai.

4
Edward Whitehead 8 Januari 2020, 10:17

2 jawaban

Jawaban Terbaik

Anda dapat mencoba metode di bawah ini untuk melewatkan data antar halaman

  1. Menggunakan Parameter Kueri
   let navigationExtras: NavigationExtras = {
      queryParams: {
        special: JSON.stringify(this.user)
      }
    };
    this.router.navigate(['details'], navigationExtras);
  1. Fungsi Layanan dan Penyelesaian (sah)
  setData(id, data) {
    this.data[id] = data;
  }

  getData(id) {
    return this.data[id];
  }
  1. Menggunakan Status Ekstra (baru sejak Angular 7.2)
    let navigationExtras: NavigationExtras = {
      state: {
        user: this.user
      }
    };
    this.router.navigate(['details'], navigationExtras);

Ref : https://ionicacademy.com/pass-data-angular-router- ionic-4/

3
Praveen Patel 8 Januari 2020, 09:34

Coba lakukan dengan menggunakan tambahan navigasi seperti ini:

import { NavigationExtras } from '@angular/router';
import { NavController } from '@ionic/angular';

constructor( public navCtrl: NavController) {
}

//this should be within a function
const navigationExtras: NavigationExtras = {
      queryParams: {
        special: JSON.stringify(temp)
      }
};
this.navCtrl.navigateRoot(['vendor/vendor-booking-dashboard-progress'], 
navigationExtras);

Kemudian untuk mengambilnya dari halaman yang dirutekan, coba ini di dalam file ts halaman:

import { ActivatedRoute, Router } from '@angular/router';

data: any;

constructor(
  public activatedRoute: ActivatedRoute,
  private router: Router) {
}

ngOnInit(){
  this.activatedRoute.queryParams.subscribe(params => {
  if (params && params.special) {
    //store the temp in data
    this.data = JSON.parse(params.special);
  }
}
}
8
Praise Hart 8 Januari 2020, 10:20