一次性获取 rxjs 订阅数据，稍后重用数据答案

【问题标题】：get rxjs subscription data once and reuse data later一次性获取 rxjs 订阅数据，稍后重用数据
【发布时间】：2017-06-19 10:59:22
【问题描述】：

目前，我正在使用 RxJS 从服务中获取计划：

public class PlansListComponent implements OnInit {
private plans$: Subject<PlanDTO> = new BehaviorSubject([]);

ngOnInit():void {
    this.serverService
        .list()
        .subscribe(
            (plans: Array<PlanDTO>) => {
                this.plans$.next(
                    (plan) => plan
                );
            },
            (error: any) => {

            }
        );
}

PlanDTO 在哪里：

{
    id: plan.id,
    name: plan.name,
    trial: plan.trial
}

所以，我正在使用async 的双向绑定使用plans$：[data]="plans$ | async"。

到目前为止，一切正常。不过，我需要处理我刚刚从服务器获得的这些计划。

我在表格上列出计划，让用户选择“试用”计划。订阅完成后，我不太清楚如何过滤以前下载的计划。我只能考虑再次使用plans$，但那又要从那里下载计划了，不是吗？

public filterTrialPlans(): void {
    // how can I use this.plans$ again without request data from server again?
}

编辑

我正在构建一个 Angular2 应用程序。目前我正在构建一个包含 3 个 angular2 组件的“页面”：

PlansComponent 主要计划组件。
- PlansList 组件 -> 列出所有计划。
- PlanForm 组件 -> 创建一个新计划。

我正在使用此代码交换“子”组件：

<div *ngIf="plansListShow" plans-list [planType]="currentPlanType" (onPlanOpen)="planOpen($event)" class="col-lg-9 col-xl-10 col-xs-12"></div>
<div *ngIf="planFormShow" plan-form (backToPlanList)="changePlanComponent('planList')" class="col-lg-9 col-xl-10 col-xs-12"></div>

其中plansListShow 和planFormShow 是PlansComponent 属性。

用于从服务器获取所有计划的组件是PlansList。为了得到它们，我使用上面公开的代码，使用BehaviorSubject plans$。

该组件的主要目标是列出所有计划，并且根据用户与该列表的交互，该组件可以执行多个操作：

toggleAll(checked: boolean): void {
    for (let plan of this.plans) {
      plan.selected = checked;
    }

    this.$toggleAll.prop('checked', checked);
  }

  deleteSelectedPlans(): void {
    let plans = [];
    this.plans.forEach((plan) => {
      if (!plan.selected) {
        plans.push(plan);
      }
    });
    this.serverservice.deletePlans(plans);
  }

我认为参考计划有两种选择：

然后下载一次并将它们推送到本地 plans 字段。
每次都使用BehaviorSubject -> 问题：它被缓存了吗？

【问题讨论】：

因为plans$ 已经是BehaviorSubject 只需使用this.plans$.subscribe(...) 之类的东西......它只会再次重播最后的计划 - 你试过了吗？
这正是我想要避免的。我不想每次需要时都重播（下载）所有计划。不知道我解释的好不好。
如果您只是订阅plan$，则不会下载任何内容，BehaviorSubject 会缓存最新的值 - 但也许您可以使用您想要在何时何地显示哪些数据的信息来更新您的问题，我怀疑 rxjs 链可能是您正在寻找的东西（尽管您当前的问题尚不清楚）
谢谢@olsn 我已经尝试为您提供一些详细信息...我不知道他们是否会帮助您...不过，我将看看 rxjs链。

标签： angular reactjs typescript rxjs

【解决方案1】：

你可以使用任何一种方式 - 从技术上讲，两者都应该工作 - 但如果你想通过 "rxjs-book" 你应该使用BehaviorSubject，它确实缓存最新的值。

如果您只想使用计划的子集，则可以简单地链接一个运算符：

public trialPlans$ = this.plans$.filter(plan => plan.isTrial);

然后将它与 tialPlans$ | async 一起使用，就像使用 plans$ 一样。

如果你想做得很好，你应该看看ngrx - 一个商店概念，它完全专注于你目前遇到的挑战 - 但是这需要一些代码重构。

【讨论】：

非常感谢@osln。太棒了！