Angular2：减少 Http 调用次数

Question

我将 Angular2 RC5 与 ASP.NET Core 服务器一起使用，该服务器通过 API 调用来获取我的数据。 我实际上想知道是否有一种方法可以减少您使用 Angular2 进行的 http 调用次数，因为我担心如果我继续以我的方式使用组件会出现很多情况。这是一个具体的例子。

我想从数据库中获取一个由 ID 和语言定义的文本值。然后我制作了以下组件：

dico.component.ts

@Component({
    selector: 'dico',
    template: `{{text}}`,
    providers: [EntitiesService]
})

class Dico implements AfterViewInit {
    @Input() private id: string;   
    @Input() private lang: string;
    private text: string = null;

    // DI for my service
    constructor(private entitiesService: EntitiesService) {
    }

    ngAfterViewInit() {
        this.getDico();
    }

    // Call the service that makes the http call to my ASP Controller
    getDico() {
        this.entitiesService.getDico(this.id, this.lang)
            .subscribe(
            DicoText => this.text = DicoText
            );
    }
}

@Component({
    template: `<dico [id] [lang]></dico>`,
    directives: [Dico]
})

export class DicoComponent {
}

这是我的服务中的代码：

entities.service.ts

getDico(aDicoID: string, aLangue: string) {
        // Parameters to use in my controller
        let params = new URLSearchParams();
        params.set("aDicoID", aDicoID);
        params.set("aLangue", aLangue);
        // Setting up the Http request
        let lHttpRequestBody = params.toString();
        let lControllerAction: string = "/libelle";
        let lControllerFullURL: string = this.controllerURL + lControllerAction;
        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(lControllerFullURL, lHttpRequestBody, options)
            .map((res: any) => {
                // Parsing the data from the response
                let data = res.json();

                // Managing the error cases
                switch (data.status) {
                    case "success":
                        let l_cRet: string = data.results;
                        if (l_cRet != null && !l_cRet.includes("UNDEFINED")) {
                            return data.results;
                        } else {
                            throw new Error("Erreur récupération Dico : " + l_cRet);
                        }
                    case "error":
                        throw new Error("Erreur récupération Dico : " + data.message);
                }
            }
            ).catch(this.handleError);
}

然后我可以在我的应用程序中使用我新制作的组件：

randomFile.html

<dico id="201124" lang="it"></dico>
<dico id="201125" lang="en"></dico>
<dico id="201126" lang="fr"></dico>

但是这个应用程序最终会使用数百个这样的“dico”，我想知道如何在应用程序完全加载之前管理一些预取或类似的东西。这有关系吗？从长远来看，这会影响性能吗？

任何建议将不胜感激。

EDIT ：这些 dico 允许我从数据库中获取翻译成我想要的语言的文本。在这里，在上面的示例中，我有 3 个“dico”，它将以意大利语、法语和英语输出一些文本。 我的应用程序会使用很多，因为每个菜单中的每个文本都是“dico”，问题是它们会有很多，现在对于我制作的每个“dico”，我的服务都被调用并进行一次 http 调用以获取数据。我想要以某种方式定义我所有的 dicos，调用该服务，它将为我提供数组中所有 dicos 的文本以避免进行多次调用（但我真的不知道该怎么做）。

Answer 1

一种未经测试的基本方法（我自己不太了解可观察对象）

class DicoService {
  private subjects = {}
  private ids = [];

  getDico(String id):Observable<Dico> {
    var s = this.subjects[id];

    if(!s) {
      this.ids.push(id);
      s = new Subject(); 
      this.subjects[id]=s;
    }
    return s.asObservable().share().first();
  }

  sendRequest() {
    http.get(....) /* pass this.ids */
    map(response => response.json())
    .subscribe(data => {
      for(item in data) { // don't know how to iterate exactly because I don't know how the response will look like
        this.subject[item.id].next(item.langText);
      }
      // you might cache them if other components added by the router also request them
      // this.subjects = {};
      // this.ids = []
    });
  }  
}

<dico [text]="dicoService.getDico('someId') | async"></dico>

ngAfterViewInit() {
  this.dicoService.sendRequest();
}