时间戳

首页 > 解决方案 > Angular 4 缓存

angular - Angular 4 缓存

问题描述

问题：

  1. 我必须显示大量数据

  2. 使用可以改变计数的分页（用户可以选择每页显示 10 / 20 / 50）

  3. 正在尝试使用 rxjs 以下链接https://blog.thoughtram.io/angular/2018/03/05/advanced-caching-with-rxjs.html

  4. 但是我使用这个有两个问题....

    4.1。这提供了最新数据，但我需要显示该特定页面的数据，并且当我再次回来时也显示相同

    4.2. 我在顶部使用搜索，这需要我使用整个数据，但是由于此缓存分步获取数据，因此当用户在从后端服务中提取完整数据之前进行搜索时，我会遇到问题...

请提出解决此问题的最佳方法....

标签： angularangular-cache

解决方案

RXJS 主题有 3 种不同类型的提要，就

 1) if you miss it you miss it = Subject   
 2) give me the last value =  BehaviorSubject   
 3) give me all the last values = ReplaySubject

听起来您正在寻找＃3，对吗？如果是这样，只需查看 ReplaySubjects。

主题 - 订阅者只会获得订阅后发出的发布值。一个

BehaviorSubject - 最后一个值被缓存。订阅者将在初始订阅时获得最新值。

ReplaySubject - 它可以缓存指定数量的发射。任何订阅者都将在订阅时获得所有缓存的值。

import * as Rx from "rxjs";

const subject = new Rx.ReplaySubject(2, 100);

// subscriber 1
subject.subscribe((data) => {
    console.log('Subscriber A:', data);
});

setInterval(() => subject.next(Math.random()), 200);

// subscriber 2
setTimeout(() => {
  subject.subscribe((data) => {
    console.log('Subscriber B:', data);
  });
}, 1000)

我们创建 ReplaySubject 并指定我们只想存储最后 2 个值，但不超过 100 ms 我们开始每 200 ms 发出 Subject 值。订阅者 A 将获取并记录 Subject 发出的每个值。我们从订阅者 B 开始订阅，但我们在 1000 毫秒后才这样做。这意味着在我们开始订阅之前，Subject 已经发出了 5 个值。当我们创建主题时，我们指定要存储最多 2 个值，但不再是 100 毫秒。这意味着在 1000 毫秒后，当订阅者 B 开始订阅时，它只会收到 1 个值，因为主题每 200 毫秒发出一次值。

推荐阅读