Component Loses Bound Data After Back From Previous Page

I created a custom Component called image-cache for caching images locally. I was using ImgCache.js but decided to use File and FileTransfer instead to download and store the image.

My template is fairly simple, <img class="image-cache" [src]="cache" /> where I’m setting the cache to the local path after the image has been downloaded.

I have all my logic to download, save and use the cached image inside the ngOnInit method. The Component works fine on the initial load, using the locally cached image as expected.

However, upon clicking Back and returning to a previous Page, the image-cache is now blank.

I added console.log statements to the lifecycle methods ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked but they are called dozens of times, worried about re-downloading the image unnecessarily.

I’m struggling to understand where best to populate the Component, so that it loads upon returning to a previous Page. Any suggestions?

I find this a bit confusing in the first place because views are cached by ionic. If you click the back button the page should still be there just as you left it.

Also it seems like you’re using angular life cycle events instead of the ionic ones, which might suit your use case better.

Also the browser should be caching images on its own.

Hi @rlouie, thanks for the reply!

The reason for the image-cache Component is to store images locally so they are available entirely offline plus it handles placeholder images, fallback images, fade in effect, etc.

The image-cache Component is available at https://github.com/ushahidi/platform-mobile/blob/master/src/components/image-cache/image-cache.ts

The issue I’m having, is if I don’t call reloadCacheImage inside of ngAfterContentChecked, then the image is blank after clicking Back on the child Page, aka returning to the Page with the image.

Which Ionic2 specific life cycle events are you referring to? I’m using ionViewDidLoad, ionViewWillEnter, etc in my Pages, but not aware of any Ionic specific events for Components?

Oh okay, I saw you mention ngAfterContentChecked and thought you were just using the regular Angular events, not the ionic ones, so nevermind on that.

That image cache thing is full of promise anti-patterns, so it’s quite hard to read, and could cause some errors to get swallowed, so I’m gonna skip over that, but you could definitely have some issues in there, I’d recommend refactoring a lot of that.

Even then, views are cached in Ionic. If you hit back on a child view, the view behind it is not re-rendered, the constructor is not called. So the only thing that could be blanking out your images would be something in the ionic lifecycle vents, unless you’ve turned off view caching.