Send data with router link

Question

I'm trying to passing the data from one page to another routing page using [queryParams]="{'usd':usd, 'count' :country, 'name' :name}" from the routing button. it's perfectly working but there is an error in my console.

ERROR in src/app/hairstylist-profile/hairstylist-profile.component.ts(18,40): error TS2339: Property 'value' does not exist on type 'Observable<Params>'.
src/app/hairstylist-profile/hairstylist-profile.component.ts(20,42): error TS2339: Property 'value' does not exist on type 'Observable<Params>'.
src/app/hairstylist-profile/hairstylist-profile.component.ts(22,41): error TS2339: Property 'value' does not exist on type 'Observable<Params>'.

this is my code:

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-hairstylist-profile',
  templateUrl: './hairstylist-profile.component.html',
  styleUrls: ['./hairstylist-profile.component.css'],
})
export class HairstylistProfileComponent implements OnInit {
  name;
  usd;
  count;
  constructor(private  route: ActivatedRoute) {

  }

  ngOnInit() {
    const usd = this.route.queryParams.value.usd;
    this.usd = usd;
    const count = this.route.queryParams.value.count;
    this.count = count;
    const name = this.route.queryParams.value.name;
    this.name = name;
  }
}

there is an error in value keyword. So how can solve?

Read the error message; you don't have the params, you have *an observable of them*. — jonrsharpe, Dec 13 '17 at 13:13
Possible duplicate of [How get query params from url in angular2?](https://stackoverflow.com/questions/35688084/how-get-query-params-from-url-in-angular2) — Jota.Toledo, Dec 13 '17 at 13:50

score 0 · Accepted Answer · answered Dec 13 '17 at 13:10

0

This may Help you

ngOnInit() {
       this.route
               .queryParams
               .subscribe(params => {
                   // Defaults to 0 if no query param provided.
                 this.usd = params['usd'] || 0;
                 this.count = params['count'] || 0;
                 this.name = params['name'] || ';
                 });
}

You cannot use .value,you must subscribe query parmas

answered Dec 13 '17 at 13:10

Robert

3,373
1
18
34

Just as an update for anyone who stumbles on this later: You can access route params without subscribing to an observable via `ActivatedRouteSnapshot` - eg. `this.route.snapshot.queryParams['usd']` Note this obviously will not update when you change routes. Always recommended to use the observable. Piping these query values to a `switchMap()` to make API calls or using the `| async` pipe in your template is an even better option than subscribing. – mcheah Mar 27 '21 at 04:34

score 0 · Answer 2 · answered Dec 13 '17 at 13:13

UPDATE 4.0.0

See Angular docs for more details https://angular.io/guide/router#fetch-data-before-navigating

ORIGINAL

Using a service is the way to go. In route params you should only pass data that you want to be reflected in the browser URL bar.

See also https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

The router shipped with RC.4 re-introduces data

constructor(private route: ActivatedRoute) {}

and ..

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];

and ..

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

See also the Plunker at https://github.com/angular/angular/issues/9757#issuecomment-229847781

Send data with router link

2 Answers2