Search code examples
htmlangularwebstorm

Send data with router link


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?


Solution

  • 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