Question

我有一项服务，要求服务器提供信息。我只需要运行一次请求并使其可用于每个组件。到目前为止，我有：

@Injectable()
export class ProductService {
    private products: Observable<IProduct[]>;
    private _productUrl = 'app/api/products2.json';

    constructor(private _http: Http) {
        console.log(this.products);
        this.products = this.setProducts();
    }

    setProducts(): Observable<IProduct[]> {
        return this._http.get(this._productUrl)
            .map((response: Response) => <IProduct[]>response.json())
            .do(data => console.log('A: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

    getProducts(): Observable<IProduct[]> {
        return this.products;
    }

    private handleError(error: Response) {
        return Observable.throw(error.json().error || 'Server error');
    }
}

当路线发生变化时，它会再次运行构造函数setProducts。记录时this.products始终未定义，因此执行if语句不起作用。当服务应该已经拥有该信息时，我可以更改哪些内容以确保此http请求不会运行？

谢谢！

Answer 1

在你的引导程序中执行此操作

这是因为每次为每个服务创建一个新的服务实例成分

import {ProductService } from './app/services/product.service'; //put your path not mine
import { provide } from '@angular/core';
import {ReflectiveInjector} from '@angular/core';

let injector = ReflectiveInjector.resolveAndCreate(HTTP_PROVIDERS);
let http = injector.get(Http);
let prodService = new ProductService (http);    

bootstrap(AppComponent, [ 
  [provide(ProductService ,{useValue:prodService})]
]).catch(err => console.error(err));

Answer 2

创建一个私有属性来缓存结果。使用您的服务的第一个组件将触发服务器请求，但后续请求将获得缓存的产品。

@Injectable()
export class ProductService {
    private _productUrl = 'app/api/products2.json';
    private products: IProduct[];

    constructor(private _http: Http) {}

    getProducts(): Observable<IProduct[]> {
       if (this.products) {
          return Observable.of(this.products);
       } else {
          return this._http.get(this._productUrl)
            .map((response: Response) => <IProduct[]>response.json())
            .do(data => console.log('A: ' + JSON.stringify(data)))
            .catch(this.handleError);
       }
    }

    private handleError(error: Response) {
        return Observable.throw(error.json().error || 'Server error');
    }
}

Answer 3

好的，@ rashfmnb你是在正确的路线上。我需要引导它，我需要将它作为构造函数添加到我的子组件中，而不是提供者。我正在创建它的新实例。

Bootstrap：bootstrap(AppComponent, [HTTP_PROVIDERS, provideRouter(AppRoutes), [ProductService, otherService, anotherService, etc.]

Angular2 Service只运行一次http方法

3 个答案: