IONI C 4 - Angular Параметры маршрутизации

Question

Я занят обновлением старого приложения IONI C до IONI C 4, и дела идут хорошо, однако я не могу найти ничего, что подробно описывает, как передавать данные и использовать страницы при маршрутизации Angular.

Вот фрагмент кода проблемы:

СТАРЫЙ КОД

this.navCtrl.set Root (VendorBookingDashboardProgressPage, {booking: temp});

В приведенном выше коде вы увидите, что booking: temp передается в качестве параметра для дополнительных данных, а VendorBookingDashboardProgressPage является ссылкой страница для перехода к.

НОВЫЙ КОД

this.navCtrl.navigate Root ('vendor / vendor-booking-dashboard-progress'); - Это где параметр booking: temp отсутствует и должен быть включен, а также жестко закодированный URL, где ссылка на страницу должна быть включена, но требуется строковый параметр.

Я могу жить с жестким кодированием URL, но параметры являются ключевыми и необходимо знать, как этого можно достичь, пожалуйста.

Answer 1

Вы можете попробовать метод ниже для передачи данных между страницами

1. Использование параметров запроса

   let navigationExtras: NavigationExtras = {
      queryParams: {
        special: JSON.stringify(this.user)
      }
    };
    this.router.navigate(['details'], navigationExtras);

Функция обслуживания и разрешения (le git)

  setData(id, data) {
    this.data[id] = data;
  }

  getData(id) {
    return this.data[id];
  }

Использование дополнительного состояния (новое с Angular 7.2)

    let navigationExtras: NavigationExtras = {
      state: {
        user: this.user
      }
    };
    this.router.navigate(['details'], navigationExtras);

Ссылка: https://ionicacademy.com/pass-data-angular-router-ionic-4/

Answer 2

Попробуйте сделать это, используя дополнительные функции навигации, например:

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);

Затем, чтобы получить его со страницы, на которую вы перенаправлены, попробуйте это в ts-файле страницы:

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);
  }
}
}