CODEWITHSUNDEEP
angulartypescriptangular-routingionic4
Quan Hodges
Quan Hodges

Reputation: 347

I'm unable to pass route params

I'm passing a route param from the calling page with the following code:

   showProfile(id: string) {
    const navigationParam: NavigationExtras = {
      queryParams: {
        userId: id
      }
    };
    console.log('navParm', navigationParam);
    this.router.navigateByUrl('view-profile', navigationParam);
   }

console.log shows navigationParam with the data. However, the console log on the view-profile page is not

  constructor(private route: ActivatedRoute,
              private router: Router) {
    this.route.queryParams.subscribe(params => {
      console.log('params', params);
    });
  }

The console log on the view-profile page

Upvotes: 0

Views: 140

Answers (3)

naveen pandi
naveen pandi

Reputation: 645

parent.ts

 openDetailsWithState() {
let navigationExtras: NavigationExtras = {
  state: {   \\create state like object
    user: this.user \\this.user is your  array this method using pass array ,u can avoid pass data inside URL bar
  }
};
this.router.navigate(['details'], navigationExtras);

}

Child.ts

data: any;


constructor(private route: ActivatedRoute, private router: Router) {
this.route.queryParams.subscribe(params => {
  if (this.router.getCurrentNavigation().extras.state) { \\Get value from state
    this.data = this.router.getCurrentNavigation().extras.state.user;
  }
});

}

This is Best solution

Upvotes: 0

naveen pandi
naveen pandi

Reputation: 645

**parent.ts**
import { Router } from '@angular/router';
constructor( public router: Router, )    

this.router.navigate(['/view-profile', { id: your params variable}]);

**view-profile.ts**

import { ActivatedRoute,  } from '@angular/router';
constructor(
   private route: ActivatedRoute,
 ) {

let data = this.route.snapshot.paramMap.get('id');
console.log(" data ", data);

}

Upvotes: 0

Ethan Vu
Ethan Vu

Reputation: 2987

You should use navigate function for this, there an issue when passing queryParams with navigateByUrl:

 this.router.navigate(['view-profile'], navigationParam);

In your view-profile page:

constructor( private route: ActivatedRoute,
             private router: Router ) {
    this.route.queryParams.subscribe(params => {
       console.log(params['userId']);
    });
  }
}

Upvotes: 2

Related Questions