Angular 2+ 并将数据从 api 获取到服务答案

【问题标题】：Angular 2+ and getting data from api to serviceAngular 2+ 并将数据从 api 获取到服务
【发布时间】：2018-01-15 22:49:06
【问题描述】：

我的服务函数中有，这允许我们在组件中获取和订阅数据

private _privateLessonsUrl: string = "http://localhost:3000/api/";
public privateLessons: any[];

getPrivateLessons() : any {
    return this._http.get(this._privateLessonsUrl)
      .map( (response: Response) => response.json() );    
}

任何组件

ngOnInit() {
    this._privateLessonsService.getPrivateLessons().subscribe(
        responseData => this.privateLessons = responseData
    );
}

如何在初始化时从该函数存储数据（在应用加载时下载一次，而不是订阅）并将其保持在服务状态：

public privateLessons: any[] = [
    { ... },
    { ... },
    { ... }
];want to download it once on app loading,

【问题讨论】：

您想在应用加载时下载一次，还是在每次重新加载组件时下载？
我想在应用加载时下载一次，
您可以创建仅用于提供加载数据的服务。然后，在应用加载时，调用一次 API 并将数据传递给服务。在此服务中，您可以使用 Subjects 和 Observables 来获取组件中的必要数据。你需要一个例子吗？
是的，我将不胜感激

标签： angular

【解决方案1】：

您可以创建服务来提供必要的数据。例如：

import { Subject } from 'rxjs/Subject';
import { Injectable } from '@angular/core';
import { Filter } from 'app/model/Filter';

@Injectable()
export class FilterService {

  private filterObject: Filter = null;
  private filterSource = new Subject<Filter>();
  filter = this.filterSource.asObservable();

  constructor() { }

  setFilter(newFilter: Filter) {
    this.filterObject = newFilter;
    this.filterSource.next(newFilter);
  }

  getCurrentfilter() {
    return this.filterObject;
  }

}

此服务允许您设置数据（使用 setFilter 函数）并订阅此数据。要订阅过滤器，您可以：

this.filterService.filter.subscribe(newFilter => {
  // do something
});

【讨论】：

【解决方案2】：

您可以使用以下内容：

    private _privateLessonsUrl: string = "http://localhost:3000/api/";
    public privateLessons: any[];

    // call this on each component you need the data
    getPrivateLessonsData() : Observable<any> {
      return new Observable.Of(this.privateLessons);
    }

    // call this on App init
    requestPrivateLessons() : any {
      return this._http.get(this._privateLessonsUrl)
        .map( (response: Response) => response.json() );    
    }

【讨论】：

【解决方案3】：

您的组件将订阅getPrivateLessons()，而不知道数据是否来自 api。在服务中，您只需检查 privateLessons 是否有值，如果有，则返回它的 Observable，否则执行请求。所以你的组件代码保持不变，只修改你的服务：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';

// ...

public privateLessons: any[];

getPrivateLessons() : any {
  // check if privateLessons has value, if so return the array
  if(this.privateLessons && this.privateLessons.length) {
    return Observable.of(this.privateLessons)
  }
  // privateLessons has no value, perform http-request
  return this._http.get(this._privateLessonsUrl)
    .map((response: Response) => response.json())
    // side effect, store data in local variable
    .do(data => this.privateLessons = data);    
}

【讨论】：