如何在 nativescript angular 中实现图像缓存

Posted 2023-03-28

【中文标题】如何在 nativescript angular 中实现图像缓存

【英文标题】：How to implement image caching in nativescript angular

【发布时间】：2020-08-08 14:51:03

【问题描述】：

我正在使用 Angular 实现 Nativescript 应用程序，并且想要进行图像缓存。 Nativescript 文档仅显示如何使用视图而不是角度。我找到了这个主题：how do i cache images in nativescript angular 但答案看起来不太有希望，因为 1) 局部函数 2) 感觉它没有 OnPush 策略

上面提到的所有内容我认为 Observables 应该是可行的方法。所以我确实有一些 ImageCahceService

import  Cache  from 'tns-core-modules/ui/image-cache';
import  ImageSource, fromNativeSource  from 'tns-core-modules/image-source';
import  Injectable  from '@angular/core';
import  Observable  from 'apollo-link';

@Injectable( providedIn: 'root' )
export class ImageCacheService 
    private cache: Cache;

    constructor() 
        this.cache = new Cache();
        this.cache.placeholder = ImageSource.fromFileSync('~/assets/images/temp-icon.jpg');
        this.cache.maxRequests = 10;
    

    get(url: string): Observable<any> 
        this.cache.enableDownload();

        return new Observable(observer => 

            const imageFromCache = this.cache.get(url);

            if (imageFromCache) 
                observer.next(imageFromCache);
                observer.complete();
                this.cache.disableDownload();
                return;
            

            this.cache.push(
                key: url,
                url,
                completed: (image: any, key: string) => 
                    if (url === key) 
                        observer.next(new ImageSource(image));
                        observer.complete();
                        this.cache.disableDownload();
                    
                
            );

        );
    

消费将是 但是使用此代码应用程序会冻结并崩溃。

如果我第一次没有观察到，它不会显示图像，但在第二次访问时它会显示 - 这很清楚为什么 - 因为图像在缓存中完全可用。

那么谁能帮我解决这个问题？

附言奖金问题 - 如果 Observables 是把 cache.disableDownload() 放在哪里的方法？

谢谢

【问题讨论】：

最好保留现有插件的缓存，你试过github.com/VideoSpike/nativescript-web-image-cache

【参考方案1】：

最后我能够使用 observables 进行图像缓存，但还有一些问题：

this.cache.enableDownload();和 this.cache.disableDownload();处于正确的位置 出于某种原因，如果我不添加 cd.detectChanges(); 这是我的管道：

import  Pipe, PipeTransform, ChangeDetectorRef  from '@angular/core';
import  Cache  from 'tns-core-modules/ui/image-cache';
import  ImageSource, fromNativeSource  from 'tns-core-modules/image-source';
import  Observable  from 'rxjs';

@Pipe(
    name: 'fromCache',
    pure: true,
)
export class ImageCachePipe implements PipeTransform 
private cache: Cache;

constructor(private cd: ChangeDetectorRef) 
    this.cache = new Cache();
    this.cache.placeholder = ImageSource.fromFileSync('~/assets/images/temp-icon.jpg');
        this.cache.maxRequests = 10;
    

    transform(url: string): any 
        this.cache.enableDownload();

        return new Observable(observer => 

            const imageFromCache = this.cache.get(url);

            if (imageFromCache) 
                observer.next(imageFromCache);
                observer.complete();
                this.cache.disableDownload();
                return;
            

            observer.next(this.cache.placeholder);

            this.cache.push(
                key: url,
                url,
                completed: (image: any, key: string) => 
                    if (url === key) 
                        observer.next(new ImageSource(image));
                        observer.complete();
                        this.cache.disableDownload();
                        this.cd.detectChanges();
                    
                
            );

        );