angular2のHTMLページとそのngOnInitメソッドをキャッシュする

Question

私はangular2 Webアプリケーションのタブで作業しています。ユーザープロファイル情報を含む3つのタブがあります。

第一タブは、私が

は、第二のタブは、フォームのAPI

しかし、私が直面していますこの問題を来ているユーザーのサブスクリプション情報が含まれているAPIを呼び出しています、そのデータに対するユーザの個人情報を、私はタブに私を変更したときにされて含まれています毎回apiが呼び出されています。これは適切ではありません。

私はこの

.share() and .cache() 

方法の両方を使用しており、また、ngOnInit機能で自分のコードを書かれたが、私はタブを変更するたびに、まだ同じ私のAPIのが呼び出さなっています。 誰でもビューやそのngOnInitメソッドをキャッシュするのを手伝ってもらえますか？

Answer 1

おそらく遅すぎます。 しかし、Angular2アプリのすべてのライフサイクル中にコンポーネントからキャッシュを保持する簡単な方法は、サービス内のストレージ変数を使用することです。

private myObject:any; 
 
    
 
    constructor(private _dataService: DataServiceService) { 
 
    } 
 
    ngOnInit() { 
 
    //Recover Cache from the servicies 
 
    // IF cache==null THEN getAPI 
 
    // ELSE get chache from the service 
 
    if(this._dataService.storage["myObject"] == null){ 
 
     this.getMyObject(); 
 
    }else{ 
 
     this.myObject = this._dataService.storage["myObject"]; 
 
    } 
 
    } 
 
    ngOnDestroy(){ 
 
    // STORE CACHE in the service BEFORE DESTROY the COMPOMENT 
 
    this._dataService.storage["myObject"] == null ? this._dataService.storage["myObject"] = this.myObject : this.myObject = this._dataService.storage["myObject"]; 
 
    } 
 
    getMyObject(){ 
 
    
 
    this._dataService.getAPI("YOURAPI").subscribe(
 
     (p:any)=>this.myObject = p, 
 
     (error) => console.log(error) 
 
    ); 
 
    }

public storage; 
 

 
    constructor(private http: Http) { 
 
    this.storage ={}; 
 
    }

だから、私はあなたがそれは私のために動作しますが、API呼び出しを使用すると、コンポーネント間で変更するたびに呼び出したいCONTことを前提としています。