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


        

Answer 1

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

Answer 2

The item, icon and title variables you want to send should be written in the state in this way.

this.nav.navigateForward('/myUrl', {
        state: {
          'items': this.substances,
          'icon': ICONS.substance,
          'title': 'Etken Maddeler'
        }
      });

We take incoming variables this way.

//receive
constructor(
      protected route: ActivatedRoute,
      protected router: Router,
  ) {
    this.selectedItem = null;
    this.route.paramMap.subscribe(params => {
      let st = this.router.getCurrentNavigation().extras.state;
      if (st) {
        this.selectedItem = st.items;
      }
    });
  }

Answer 3

Send data with Router service and extract with global variable, history

//sender component

  // private router: Router
  nextPage() {
    this.router.navigate(['history'],
      { state: [{ name: "covid-19", origin: "china" },{ name: "ebola", origin: "us" }] }
    )
  }

//receiver page

  ngOnInit() {
  let data = history.state;
  console.log("data-->",data);
// ** data** 
//0:{name: "covid-19", origin: "china"} 1: {name: "ebola", origin: "us"} navigationId: 2
  }

Answer 4

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 5

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 6

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