如何以原始脚本角度实现图像缓存

Question

我正在用角度实现Nativescript应用，并想进行图像缓存。 Nativescript文档仅显示如何使用视图，而没有显示角度。我已经找到了以下主题：how do i cache images in nativescript angular，但答案似乎不太理想，因为1）本地功能2）感觉它没有OnPush策略

上面提到的所有方法，我都认为Observable应该是可行的方法。所以我确实有一些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();
                    }
                }
            });

        });
    }
}

消耗量为但是使用此代码，应用程序将冻结并崩溃。

如果我第一次没有可观察到的东西，它不会显示图像，但是在第二次访问时它会显示图像-这就是为什么-因为图像在缓存中是可用的。

那么有人可以帮我吗？

ps.s。额外的问题-如果Observables是将cache.disableDownload（）放到哪里的方法？

谢谢

Answer 1

最终，我能够使用可观察对象进行图像缓存，但是还存在一些问题：

是this.cache.enableDownload（）;和this.cache.disableDownload（）;位置正确出于某种原因，如果我不添加cd.detectChanges（），则图像显示延迟较大（经过一些随机的dom渲染）。这是我的烟斗：

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();
                    }
                }
            });

        });
    }
}