Ionic 4. Alternative to NavParams

Question

I am using ionic 4. It does not accept to receive data using navparams. Here is my sender page method:

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

Receiver page line;

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

What is the right approach to doing this in ionic 4. I am also uncertain whether gotoFinalView method is valid.

Answer 1

This is the efficient way to solve your problem user Angular Routers concepts in your application. just declare your router like the following

Your app routing module like the following

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 is the parameter what i want to send to that page.

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

share your parameter like this in your first page.

In your second page inject the activated route using DI(Dependency Injection)

constructor(private actRoute: ActivatedRoute)

Then Get your parameters using the following code

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

This is the simple way. You can send multiple parameter at a time.

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

and get those parameters like the following

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

Answer 2

While Routing you can write like this:

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

To get this parameters on the next page you can write:

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 3

//in home.ts
import{ Router,ActivatedRoute, NavigationExtras }         from '@angular/router';
getProductStatics(productObject : any) {
    var object1 = {
            id: productObject, 
        }
    const navigationExtras: NavigationExtras = {state : {object: 
    JSON.stringify(object1)}};
    this.router.navigate(["/product-statics"], navigationExtras);
}
//in product-statics.ts

import{ Router,ActivatedRoute,NavigationExtras }         from '@angular/router';
if(self.router.getCurrentNavigation().extras.state) {
                 var object1 
       =  this.router.getCurrentNavigation().extras.state.object;
                var object  = JSON.parse(object1);
          var newObjectData    = object.id;      
 }

Answer 4

This is how I solved my problem:

I created a Service with a setter and getter methods as;

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

Injected the Service and NavController in the first page and used it as;

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

Extracted the data at the final page by;

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

Answer 5

ionic 4 navigation with params

sender page 1. import the following

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

2. constructor(private navCtrl:NavController)
3. sender page

gotonextPage()

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

4.Receiver Page

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