Как реализовать кэширование изображений в nativescript angular

Question

Я реализую приложение Nativescript с angular и хочу выполнить кэширование изображений. Документация Nativescript показывает только как работать с view, но не angular. Я нашел этот topi c: как мне кэшировать изображения в nativescript angular, но ответ выглядит не очень многообещающе, потому что 1) Локальные функции 2) кажется, что у него нет стратегии OnPu sh

со всеми вышеперечисленными значениями, я думаю, что наблюдаемые должны быть до go. Так что у меня есть некоторые 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 бонусный вопрос - если Observables находятся на пути к go, куда поставить cache.disableDownload ()?

Спасибо

Answer 1

наконец я смог выполнить кэширование изображений с помощью наблюдаемых, но осталось несколько вопросов:

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

        });
    }
}