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

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'];