角2のHttpキャッシング

Question

次のコード（テストコード）が与えられた場合、要求されたファイルを1回だけ呼び出す最良の方法は何ですか？現在、ボタンを押すたびに、XHR要求が行われます。

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

@Injectable() 
export class MyService { 
    constructor(private http: Http) {} 
    getList() { 
     return this.http.get('./public/data.json') 
      .map(res => res.json()); 
    } 
    getOne(id: number) { 
     return this.getList() 
      .map(data => data.filter(my => my.id === id)[0]); 
    } 
} 

ここでJSONデータファイルは、ここで

[ 
    {"id": 1, "name": "Data 1"}, 
    {"id": 2, "name": "Data 2"}, 
    ... 
] 

のコンポーネントファイルです。それは私がアプリケーションを起動するために、ここですべてのものを入れていないよ（idとnameプロパティを持つ唯一のクラスである）単純なモデルファイル

import {Component} from 'angular2/core'; 
import {MyService} from 'my-service'; 
import {MyModel} from 'my-model'; 

@Component({ 
    selector: 'test', 
    templateUrl: ` 
     <button (click)="getRandom()">Test</button> 
     <p>{{ selected.name }} ({{ selected.id }})</p> 
    ` 
}) 
export class MyComponent { 
    selected: MyModel; 
    constructor(private myService: MyService) {} 
    getRandom() { 
     let id = Math.floor((Math.random() * 10) + 1); 
     this.myService.getOne(id) 
      .subscribe((data: MyModel) => this.selected = data); 
    } 
} 

を使用しています。しかし、これはアイデアを示しています。

感謝

Answer 1

あなたは、データをキャッシュするためにdoオペレータを活用することができ、サービスプロパティ内を初めて受け取っ：

@Injectable() 
export class MyService { 
    private data:any; 

    constructor(private http: Http) {} 

    getList() { 
    if (this.data) { 
     return Observable.of(this.data); 
    } else { 
     return this.http.get('./public/data.json') 
     .map(res => res.json()) 
     .do(data => { 
      this.data = data; 
     }); 
    } 
    } 

    getOne(id: number) { 
    return this.getList() 
     .map(data => data.filter(my => my.id === id)[0]); 
    } 
}