缓存angular2 Html页面及其ngOnInit方法

Question

I am working on tabs in my angular2 web app.I have three tabs containing user profile information.

1st Tab contain user personal info for that data I am calling an API

2nd Tab contain user subscription info that is also coming form API

But problem I am facing is when I change the tab my api are getting called every time.which is not proper.

I have use both this

.share() and .cache()

method and also written my code in ngOnInit function but still the same my api's are getting called whenever I change the tab. Can anyone please help me out to cache the view or its ngOnInit method.

Answer 1

Maybe it is too late. But a easy way to keep a cache from your component during all the life-cycle of a Angular2 app is using a storage variable in your service.

 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 ={}; } 

So, I assume that you cont want to call the API call every time you change between components, It works for me.