ルータリンクでデータを送信

Question

ルーティングボタンから[queryParams]="{'usd':usd, 'count' :country, 'name' :name}"を使用して、あるページから別のルーティングページにデータを渡そうとしています。それは完全に動作していますが、私のコンソールにエラーがあります。

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; 
    } 
} 

値キーワードにエラーがある：

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>'. 

この

は私のコードです。それでどうやって解決できるの？

Answer 1

これは、クエリparmas

Answer 2

UPDATE 4.0.0

は詳細 https://angular.io/guide/router#fetch-data-before-navigating

のための角度のドキュメントを参照してくださいを登録する必要があり、あなたが.VALUE使用することはできませんあなた

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

を助けるかもしれません

オリジナル

サービスを利用する方法があります。ルートパラメータでは、ブラウザのURLバーに反映させたいデータだけを渡す必要があります。

は.. data

constructor(private route: ActivatedRoute) {} 

とを、紹介し再 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

RC.4のに同梱ルータも

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

とを参照してください

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

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

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