Send data with router link - html

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?

Answer 1

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

Answer 2

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