Использовать фильтр или конвейер для загрузки категорий продуктов на страницы в Ionic 2?

Вы можете создать службу, которая кэширует данные (возможно, на 5 минут, 30 минут, один час или любой временной интервал, который имеет смысл в контексте вашего приложения), чтобы избежать выполнения такого большого количества HTTP-запросов, а также будет возвращать только что вам нужно, чтобы вы могли использовать его непосредственно в компоненте / представлении, ничего не фильтруя.

Это не только сэкономит много бесполезных HTTP-запросов, отправляемых на сервер, но также ускорит работу приложения, поскольку локальные данные будут использоваться большую часть времени, когда пользователь открывает страницы продукта.

Предположим, у вас уже есть класс для продуктов:

export class ProductModel {
    public aw_deep_link: string;
    public product_name: string;
    public apple_cat: string;
    //...
}

Затем мы можем создать нашу модель кеша следующим образом:

class ProductCache {
    public products: Array<ProductModel>;
    public timestamp: number;

    public isValid(): boolean {
        if(!this.products) {
            return false;
        }

        let isExpired = Date.now() - this.timestamp > 1800000; // 30 min
        return !isExpired;
    }
}

а затем мы можем использовать его в нашей ProductCategoryService

// Angular imports
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

// Rxjs imports
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class ProductCategoryService {

    private cache: ProductCache;
    private apiUrl: string = 'https://sheetsu.com/apis/v1.0/04c2d2906a10';

    constructor(private http: Http) {
        this.cache = new ProductCache();
    }

    public getAll(): Observable<Array<ProductModel>> {
        if(this.cache.isValid()) {
            // Return the products from the cache
            return Observable.of(this.cache.products);
        }

        // Cache is empty/expired, so we need to make the http request
        return this.http.get(this.apiUrl).map(res => res.json()).map(data => {
            // Save the data in the cache for the next time
            this.cache.products = data;
            this.cache.timestamp = Date.now();

            // Return the list of (all) products
            return this.cache.products;
        });
    }

    public getIpadProducts(): Observable<Array<ProductModel>> {
        return this.getAll().filter((product: ProductModel) => {
            return product.apple_cat.toLowerCase() === 'ipad';
        });
    }

    public getIphoneProducts(): Observable<Array<ProductModel>> {
        return this.getAll().filter((product: ProductModel) => {
            return product.apple_cat.toLowerCase() === 'iphone';
        });
    }

    // ...
}

А затем просто вызовите правильный метод на каждой странице, и HTTP-запрос будет выполняться только один раз (или каждые 30 минут в этом примере) из-за кеша продукта.

Могут быть синтаксические ошибки или опечатки (я закодировал непосредственно в ответе SO), но это должно дать вам представление о том, как действовать в данном сценарии. Пожалуйста, дайте мне знать, если что-то не работает должным образом, я могу помочь вам это исправить ...

ОБНОВЛЕНИЕ: здесь вы можете найти некоторую информацию (из Angular 2 Docs) о том, почему использование каналов для фильтрации данных не очень хороший подход, и поэтому я рекомендую делать это в сервисе, сохраняя его скрытым для остальной части приложения (в конце концов, каждая страница категории просто хочет получить данные, которые она должна отображать, ей не нужно иметь дело со всеми продуктами, чтобы затем найти только те, которые она должна отображать в представлении ).