I'm currently in the process of developing a custom Angular2 module specifically designed for caching images. Within this module, I am utilizing a provider service that returns Observables of loaded resources - either synchronously if they are already cached, or asynchronously if not.
During the development phase, I encountered an issue when attempting to preload a batch of images on application startup, particularly with the concatMap function.
public preloadImages(imgUrls: string[]) {
console.log(this.cachedResources); //Upon inspection, everything seems to be functioning properly
return Observable.from(imgUrls).concatMap(this.getImage);
}
Within my provider, I have implemented a collection object
private cachedResources: DictMap<CachedResource>;
to manage and store cached data. Unfortunately, this object becomes inaccessible from the getImage
function when invoked by the concatMap method.
public getImage(imgUrl: string) {
console.log(this.cachedResources); //At this point, the object is unrecognized
}
This has presented me with the challenge of making the cachedResources object visible within the function. Any suggestions or insights on how to address this dilemma would be greatly appreciated.