在HTTP中使用ActivatedRoute參數獲取請求

我在從ActivatedRoute獲取參數以用於Http Get請求時遇到問題。基本上，我試圖獲取this.link並在我的DataService上使用它來發出Http Get請求。當用戶訪問DetailsComponent時，我不想使用該參數來形成Http get請求。例如，用戶導航到example.com/animal/cat，我想在我的Get請求中使用cat。但是，每次嘗試時，我都會收到一條迴應，告訴我這個鏈接是未定義的。在HTTP中使用ActivatedRoute參數獲取請求

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

}

我可以清楚地看到經由串插在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']) } 
); 
}

來源

2016-07-27 Sal

什麼是你的細節部分的路線網址是什麼？如果您用查詢參數調用詳細信息，例如http://localhost/details?id=123，那麼請替換？與;，新的路由器使用;在url中（http://localhost/details;id=123）。

然後在你的AnimalDetailsComponent移動this.subscription...到ngInit（）的開始。在Angular生命週期中路由初始化，而不是在構造函數中。

來源

2016-07-27 02:37:29 Chybie

'{path：'animal /：link'，component：AnimalDetailsComponent}' 我沒有使用查詢參數，我使用路由參數。我認爲，由於構造函數在ngOnInit之前完成，我可以將路由參數分配給變量'link'，那麼ngOnInit將通過DataService在Get Http請求上使用它。我嘗試將值'cat'分配給'link'，它的工作方式與我想的一樣。但是，當構造函數賦值時仍然顯示爲「未定義」。 – Sal

不，它不是在施工期間，施工者沒有使用Angular2生命週期。相反，將您的代碼'this.subscription = ....'移動到ngInit。 – Chybie

我試着將構造函數中的代碼移動到ngOnInit方法中，鏈接屬性在Get請求中仍未定義。儘管我設法提出了一個解決方案。我會在這裏發佈，因爲別人可能會碰到類似的東西。我仍然是angular2的初學者，所以可能有更好的方法。我將鏈接屬性從url屬性直接移入getData方法作爲參數。現在完美無瑕。謝謝您的幫助！ – Sal

在HTTP中使用ActivatedRoute參數獲取請求

回答

相關問題