angular - 在服务 http.get 调用完成后让组件执行函数

Question

我在思考 angular2 中的可观察对象和订阅时遇到了真正的麻烦。我目前遇到的问题如下:

我有一项服务，其中包含从 API 发布和获取数据的方法。服务被注入(inject)到组件中，组件直接调用服务中的那些方法。该服务然后检索数据并自行存储，但我随后想在组件内处理该数据。我不知道如何让组件在服务本身检索并存储数据后执行功能。

服务.ts

import { Injectable } from 'angular2/core';    
import { Http } from 'angular2/router';

@Injectable()
export class Service {
    result: Object;

    constructor(http: Http) {
        this.http = http;
    }

    httpGet(url) {
        return this.http.get(url).subscribe(
            result => this.result = result.json(),
            error => console.log(error),
            () => {}
        )
    }
}

组件.ts

import { Component } from 'angular2/core';
import { Service } from './service';

@Component({
    ...
})
export class Component {
    formattedResult: Object;

    constructor(service: Service) {
        this.service = service;
        this.service.httpGet('/api')

        // How do I call format result on service.result only after it is completed?
        this.formatResult(service.result) // Need to execute this after the http call is completed

        // I want something like:
        this.service.httpGet('/api').then(() => formatResult(this.service.result));
    }

    formatResult(result) {
        this.formattedResult = result.map(x => x.length) // For example
    }
}

Answer 1

回答我自己的问题:

在应用程序根目录中，导入 Rxjs:

import 'rxjs/Rx';

这使您可以访问完整的 Observable 对象(而不仅仅是 Angular 中包含的“Observable-lite”)。这使您能够 .map .reduce 等 Http 请求。

您现在可以在 Http 请求上使用 .map 在服务上下文中执行任意代码，即使它是订阅结果的组件。因此，为了实现我一开始的目标，我们可以:

服务.ts

import { Injectable } from 'angular2/core';    
import { Http } from 'angular2/router';

@Injectable()
export class Service {
    result: Object;

    constructor(http: Http) {
        this.http = http;
    }

    httpGet(url) {
        return this.http.get(url).map(
            result => {
                let data = result.json();
                this.result = data;
                return data
            }
        )
    }
}

组件.ts

import { Component } from 'angular2/core';
import { Service } from './service';

@Component({
    // Component setup
})
export class Component {
    formattedResult: Object;

    constructor(service: Service) {
        this.service = service;
        this.service.httpGet('/api').subscribe(
            data => this.formatResult(data);
        );
    }

    formatResult(result) {
        this.formattedResult = result.map(x => x.length) // For example
    }
}

感谢 Gunter 和 Mark 的回复，帮助我稍微了解一下这个问题，我觉得我在阅读了很多解决这个问题的文档后更好地理解了 Observables!