Angular 2传递值来服务

时间:2017-01-10 13:57:57

标签: angular rest angular-services

我知道如何在嵌套组件之间传递数据。但我有一个从REST API获取一些数据的服务。当我点击并运行一个函数时,我需要在我的服务中更改URL。我需要将ID传递给我的服务并更改我的URL。

我是我的组成部分:

showUnitDetails(selectedUnit) {
    this.unitId = selectedUnit;
    this.unitDetails = true;
    this._unitService.getUnit(this.unitId).subscribe(resUnitData => this.unit = resUnitData, err => alert('Error'));
}

在我的服务中:

getUnit(id: unitId){
    return this._http.get(this._url).map((response: Response) => response.json());
}

但是当我保存我的服务时,我收到错误"Cannot find name unitId"

1 个答案:

答案 0 :(得分:1)

我向您展示了一个快速示例,展示了如何将组件和http服务与参数连接在一起,您可以传入id和url。

import {Component, Injectable, NgModule} from "@angular/core"
import {Http} from "@angular/http"

//A Module
@NgModule({
    declarations: [MyComponent],
    providers: [MyService],
})
export class MyModule
{
}

//The Component
@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html',
})

export class MyComponent
{
    private id: number;
    private url: string;

    constructor(public myService: MyService)
    {
    }

    ngOnInit()
    {
        this.id = 123;
        this.url = '/api/stuff';

        this.myService
            .getStuff(this.id, this.url)
            .subscribe(response =>
                {
                    console.log(response);
                },
                error =>
                {
                    console.log(error);
                })
    }
}

//The Service
@Injectable()
export class MyService
{
    constructor(private http: Http)
    {
    }

    getStuff(id: number, url: string)
    {
        const urlWithId = url + id;

        return this.http
            .get(urlWithId)
            .map(res => res.json())
    }
}