Ionic 4. Альтернатива NavParams

Question

Я использую ionic 4. Он не принимает данные, используя navparams.Вот мой метод страницы отправителя:

  //private route:Router
  gotoFinalView(intent) {
    this.route.navigateByUrl(`${intent}`, this.destination);
  }

Строка страницы получателя;

  //private navParams:NavParams  
  this.destination = navParams.data;

Каков правильный подход для этого в ionic 4. Я также не уверен, что метод gotoFinalView действителен.

Answer 1

ionic 4 навигация с параметрами

страница отправителя 1. импортировать следующее

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

конструктор (приватный navCtrl: NavController) страница отправителя

gotonextPage ()

gotonextPage()
{
let navigationExtras: NavigationExtras = {
          state: {
            user: 'name',
            parms:Params
          }
        };
        this.navCtrl.navigateForward('pageurl',navigationExtras);
}

4. Страница получателя

import { ActivatedRoute, Router } from '@angular/router';
constructor( private route: ActivatedRoute, private router: Router)
{
this.route.queryParams.subscribe(params => {
  if (this.router.getCurrentNavigation().extras.state) {
    this.navParams = this.router.getCurrentNavigation().extras.state.parms;
  }});
}

Answer 2

Это эффективный способ решения вашей проблемы с пользовательскими концепциями Angular Routers в вашем приложении.просто объявите ваш роутер, как показано ниже:

Ваш модуль маршрутизации приложения похож на следующее

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ViewComponent} from "./crud/view/view.component";
import {CreateComponent} from "./crud/create/create.component";  
import {UpdateComponent} from "./crud/update/update.component";
import {ReadComponent} from "./crud/read/read.component";

const routes: Routes = [
{path: '', component: ViewComponent},
{path: 'create', component: CreateComponent},
{path: 'update/:id', component: UpdateComponent},
{path: 'view/:id', component: ReadComponent}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

: id - это параметр, который я хочу отправить на эту страницу.

 this.router.navigate([link + '/' + id]);

поделитесь своим параметром таким образом на первой странице.

На второй странице введите активированный маршрут, используя DI (Dependency Injection)

constructor(private actRoute: ActivatedRoute)

Затем получите параметры, используя следующий код

this.productID = this.actRoute.snapshot.params['id'];

Это простой способ.Вы можете отправить несколько параметров за один раз.

{path: 'update/:id/:name/:price', component: UpdateComponent}

и получить эти параметры, подобные следующим

this.productID = this.actRoute.snapshot.params['id'];
this.productName = this.actRoute.snapshot.params['name'];
this.productPrice = this.actRoute.snapshot.params['price'];

Answer 3

Во время маршрутизации вы можете написать так:

this.router.navigate(["/payment-details",{
  prev_vehicle_type: this.vehicle_type,
      prev_amt: this.amt,
      prev_journey:this.whichj
}]);

Чтобы получить эти параметры на следующей странице, вы можете написать:

constructor(
public router: Router,
public activateroute: ActivatedRoute){
this.activateroute.params.subscribe((data: any) => {
  console.log(data);
  this.vehicle_type = data.prev_vehicle_type;
  this.amt = data.prev_amt;
  this.whichj = data.prev_journey;

});
}

Answer 4

Вот как я решил свою проблему:

Я создал Службу с методами установки и получения как;

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class MasterDetailService {
  private destn: any;
  constructor() {}

  public setDestn(destn) {
    this.destn = destn;
  }

  getDestn() {
    return this.destn;
  }
}

Внедрил Службуи NavController на первой странице и использовали его как;

  gotoFinalView(destn) {
    this.masterDetailService.setDestn(destn);
    this.navCtrl.navigateForward("destn-page");
  }

Извлекли данные на последней странице с помощью:

constructor(
    private masterDetailService: MasterDetailService
  ) {
    this.destination = this.masterDetailService.getDestn();
  }