角5：現在のクエーパラムを取得する[ルーティング]

Question

クエリアパラムをコンポーネントに取得する際に問題があります。今のところ、私はちょうどconsole.log(...)にしたいです。 私は@angular/routerからActivatedRouteを使用しています。

私は「...」そう、残念ながらいくつかの無関係なコードがで置換することがあります仕事のために、特定のプラットフォームを再開発しています

マイComponent.tsコード：私は

import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 
import { RelevantReportService } from './../reportServices/relevantReports.service'; 
import { ActivatedRoute ,Params, Router } from '@angular/router'; 

@Component({ 
    selector: 'vr-reports', 
    templateUrl: './reports.component.html', 
    styleUrls: ['./reports.component.scss'], 
    providers: [RelevantReportService], 
    encapsulation: ViewEncapsulation.None 
}) 
export class ReportsComponent implements OnInit { 

    reportSections: any; 
    constructor(private relevantReportService: RelevantReportService, 
       private router: Router, 
       private activatedRoute : ActivatedRoute 

      ) { } 

    ngOnInit() { 
    ... 

    console.log(this.activatedRoute.queryParams.value.reportName) 
    // console.log(this.activatedRoute.queryParams._value.reportName) 
    } 
... 

} 

console.log(this.activatedRoute.queryParams.value.reportName)、コンソールは（ただし、私が望んでいたまさにです）queryparams を吐き出すそれはまた

を語ります10

"プロパティ '値'はタイプ 'Observable'には存在しません"

私はこれに対処する正しい方法ではないと信じています。

Answer 1

（観測可能に加入することによって）パラメータの変更を監視できるようにするには、観測可能です。現在、渡されたクエリのparamsの使用を取得するには：

this.activatedRoute.snapshot.queryParams 

また、私は最良の選択肢は、URLツリーを使用していると言うでしょうAngular5についてActivatedRouteSnapshot代わりのActivatedRoute

Answer 2

使用することができます。 ルータの状態はツリーであり、URLはシリアライズされた状態だけであるため、URLはシリアル化されたツリーです。 UrlTreeは、URL

詳細 がhttps://angular.io/api/router/UrlTree

Answer 3

何も驚くことに対処するアフォーダンスの多くを提供するデータ構造です！ activatedRoute.queryParamsが観察され、したがって、あなたはあなたが次のことを行う必要がありhttps://angular.io/api/router/ActivatedRoute#queryParams

あたりとしてそれに加入する必要があります。

ngOnInit() { 
    this.activatedRoute.params.subscribe(values => { 
     console.log(values);//Which will print the properties you have passed 
    }); 
    }