HTTP GetのActivatedRouteパラメータを使用した問題

Question

ActivatedRouteからHttp Get要求に使用するパラメータを取得できません。基本的には、this.linkを取得して、DataServiceでHttp Getリクエストを作成しようとしています。ユーザーがDetailsComponentにアクセスすると、そのルートパラメータを使用してHttp get要求を作成することはできません。たとえば、ユーザーがexample.com/animal/catに移動すると、Getリクエストでcatを使用したいとします。しかし、私が試してみるたびに、私はthis.linkが未定義であることを伝える応答を受け取ります。

GET http://123.123.123.123/api/v2/_table/animal/undefined?related=move_by…k&api_key=7201dd61c71 404 (Not Found) 

のDataService：

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Subscription, Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map' 

@Injectable() 
export class DataService { 

    constructor(private dataService: Http) { 
    } 
    urlprefix = 'http://123.123.123.123/api/v2/_table/animal/'; 
    api = '&api_key=7201dd61c71'; 

    getData(url): Observable<any> { 
    return this.dataService.get(this.urlprefix + url + this.api); 
    } 
} 

DetailComponent

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { ROUTER_DIRECTIVES, ActivatedRoute, Router } from '@angular/router'; 
import { Response } from '@angular/http'; 
import { Subscription } from 'rxjs/Rx'; 

import { DataService } from '../../data.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'animal-details', 
    templateUrl: 'animal-details.component.html', 
    styleUrls: ['animal-details.component.css'], 
    directives:[ROUTER_DIRECTIVES], 
    providers:[DataService] 
}) 
export class AnimalDetailsComponent implements OnInit, OnDestroy { 

    private subscription: Subscription; 

    animal = {}; 

    link: string; 
    table = 'animal/' 
    private url = this.table + this.link + '?related=family'; 



    constructor(private activatedRoute: ActivatedRoute, private dataService: DataService, private router: Router) { 
    this.subscription = activatedRoute.params.subscribe(
    (param: any) => this.link = param['link'] 
    ); 
    } 

    ngOnInit() { 

    this.dataService.getData(this.url) 
    .map((response: Response) => response.json()) 
    .subscribe(
     (data: any) => {this.animal = data}, 
     err => { this.router.navigate(['error404']) } 
    ); 
    } 

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

} 

Iが明らかに文字列補間を介しDetailsComponentに正しく出力されるのparamsを見ることができます：{{リンク}}。私が何を試みても、依然としてGetリクエストでは未定義と表示されており、いつもエラーが出ます。私はどんな助けにも感謝しています。

編集： DataServiceの下に新しい作業コード：

export class DataService { 

    constructor(private dataService: Http) { 
    } 
    urlprefix = 'http://123.123.123.123/api/v2/_table/'; 
    api = '&api_key=7201dd61c71'; 

    getData(table, link, url): Observable<any> { 
    return this.dataService.get(this.urlprefix + table + link + url +this.api); 
    } 
} 

AnimalDetailsComponent：

link: string; 
table = 'animal/'; 
private url = '?related=family'; 

ngOnInit() { 

    this.dataService.getData(this.table, this.link, this.url) 
    .map((response: Response) => response.json()) 
    .subscribe(
    (data: any) => {this.animal = data}, 
    err => { this.router.navigate(['error404']) } 
); 
} 

Answer 1

あなたの詳細コンポーネントのルートURLは何ですか？クエリパラメータを使用して詳細を呼び出す場合は、例http://localhost/details?id=123のように置き換えますか？新しいルータの使用; （http://localhost/details;id=123）。 ngInit（）の先頭にあなたのAnimalDetailsComponent移動this.subscription...で次に

。ルーティングは、コンストラクタ中ではなく、Angularライフサイクル中に初期化されます。