Question

我将Angular2 RC5与ASP.NET核心服务器一起使用，该服务器进行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>

但是这个应用程序最终将使用数百个＆＃34; dico＆＃34;我想知道如何在应用程序完全加载之前管理一些预取或类似的东西。它甚至重要吗？这会影响长期的表现吗？

非常感谢任何建议。

编辑：这些dico允许我从数据库中提取一个翻译成我想要的语言的文本。在这里，在上面的例子中，我有3＆＃34; dico＆＃34;这将输出一些意大利语，法语和英语的文本。我的应用程序将使用很多，因为每个菜单中的每个文本都是＆＃34; dico＆＃34;，问题是它们会有很多，而且现在每个菜单都会出现＃d;＆d; ＃34;我做了，我的服务被调用并进行一次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();
}

Angular2：减少Http调用的次数

1 个答案: