Question

我有两个angular2服务，一个提供数据

@Injectable()
export class DataService {

constructor(private http: Http) { }

public getData(): Observable<Data> {
    return this.http.get('/api/foo')
        .map(res => new Data(res.json().data));
}

和一个提供设置

@Injectable()
export class SettingsService {

constructor(private http: Http) { }

public getSettings(): Observable<Settings> {
    return this.http.get('/api/foo')
        .map(res => new Settings(res.json().settings));
}

/ api / foo的回复是

{
    "settings": {
        ...
    }
    "data": {
        ....
    }
}

这些服务都使用相同的api调用来获取其内容，并且对于相同的数据，对服务器的调用正在进行两次。

我意识到现有的api在一条消息中结合数据和设置并不理想，最终可能需要更换。

与此同时，我的问题是：使用现有的api是否有一种直接的方式来提供共享相同api调用的数据服务和设置服务？是否可以拨打api向两个服务提供数据，或者每个服务必须独立运行？

更新到目前为止，我的想法是我需要创建一个基本服务来进行实际的http调用，调用这个FooService。然后需要将FooService注入到SettingsService和DataService中，然后可以将FooService的输出分别表示为设置和数据。我遇到的问题是如何将FooService返回的Observable<any>分叉到另外两个Observable，Dataservice中的Observeable<Data>和SettingsService中的Observeable<Settings>？这甚至可能吗？

Answer 1

看起来你想要一种按键动态选择对象的方法。这是你在找什么？

public getSettings(dataKey): Observable<Settings> {
    return this.http.get('/api/foo')
        .map(res => new Settings(res.json()[dataKey]);
}

Answer 2

我想出了如何做到这一点。创建一个服务来访问api，然后在api服务上使用.map（）创建设置和数据服务。

首先创建访问底层api的服务：

@Injectable()
export class ApiService {

    constructor(private http: Http) { }

    public getObservable(): Observable<any> {
        return this.http.get('/api/foo')
            .map(res => res.json()));
}

然后创建程序将使用的两个服务：

@Injectable()
export class SettingsService {

    constructor(private api: ApiService) { }

    public getSettings(): Observable<Settings> {
        return this.api.getObservable()
            .map(res => new Settings(res.settings));
    }
}

和

@Injectable()
export class DataService {

    constructor(private api: ApiService) { }

    public getData(): Observable<Data> {
        return this.api.getObservable()
            .map(res => new Data(res.data));
    }
}

使用相同Observable的两个angular2服务

2 个答案: