角度 - パラメータ化されたルートに基づいて動的URLからデータを取得する

Question

パラメータを使用してルートでデータを取得したいとします。 HTMLでの呼び出しは、このようなものです：

<a routerLink="my-component/2017">2017</a> 

コンポーネントは、主に次のようになります。

export class MyComponent implements OnInit, OnDestroy { 
    year: string; 
    destination: any[]; 

    constructor(private _route: ActivatedRoute, 
       private _info: MyService) {} 

    ngOnInit() { 
    const urlBase = 'http://...'; 
    this.subsUrl = this._route.paramMap.subscribe(
        params => { this.year = params.get('year'); }); 

    this._info.url = urlBase + this.year; 
    this.subsTree = this._info.getJsonData() 
           .subscribe(resultArray => this.destination = resultArray, 
             error => alert(error)); 
    } 

    ngOnDestroy() { 
    this.subsTree.unsubscribe(); 
    this.subsUrl.unsubscribe(); 
    } 

とサービス：

@Injectable() 
export class MyService { 
    url: string; 

    constructor(private _http: HttpClient) { } 

    getJsonData() { 
    return this._http 
     .get(this.url) 
     .catch(this.handleError); 
    } 
} 

サービスは、単一のパラメータに対して正しくデータを返します。 （年）。私の問題は、年を変更すると、手動でページを更新するまで、データは変更されないということです。

Answer 1

あなたがthis._route.paramMapとあなたのコンポーネント名を使用していると私はあなたが更新することをお勧めMyComponent であるあなたのURLを構築するためにrouterLinkとqueryParamsを使用することができますrouterLink

<a [routerLink]="['/my']" [queryParams]="{year:'2017'}">2017</a> 

Answer 2

次のように。

<a [routerLink]="['/my-component']" [queryParams]="{year:2017}"> 
    2017 
</a> 

最終URLは次のようになります。

http://localhost:3000/my-component?year=2017