Angular5:对可观察性和订阅的澄清

Question

我目前正在尝试在向下滚动时动态加载数据，这样它就根本不需要一次加载，而是在用户滚动时逐个加载数据。这方面的图片如下：

​

​

目前，在初始化包含右侧数学信息的组件时，我使用订阅将显示在屏幕上的定理数绑定到我的服务所指示的内容。这样做的方式如下：

bible.component.ts

​

import { Component, OnInit, AfterContentChecked } from '@angular/core';
import { BibleService } from './bible.service';
import {Theorem} from '../../model/theorem';
import {ElementRef, ViewChild} from '@angular/core';

@Component({
  selector: 'app-bible',
  templateUrl: './bible.component.html',
  styleUrls: ['./bible.component.scss']
})
export class BibleComponent implements OnInit {

  allTheorems: Theorem[];
  filtered: Theorem[];
  @ViewChild('theoremList') elementView: ElementRef;

  constructor(private service: BibleService) {}

  ngOnInit() {
    this.service.findAllTheorems()
      .subscribe(
        theorems => this.allTheorems = this.filtered = theorems
      );
  }

  search(search: string) {
    this.filtered = this.allTheorems.filter(theorem =>
      theorem.rule.includes(search) ||
       (theorem.name && theorem.name.toLowerCase().includes(search.toLowerCase())
    ));
  }
}

​

bible.service.ts

​

import {Observable} from 'rxjs/Observable';
import {Theorem} from '../../model/theorem';
import {AngularFireDatabase} from 'angularfire2/database';
import {Injectable, OnInit} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class BibleService {

  pageSize = 10;
  private pageSizeSubscription;
  pageSizeChange: Subject<number> = new Subject<number>();

  constructor(private af: AngularFireDatabase) {}

  findAllTheorems(): Observable<Theorem[]> {

    return this.af.list('theorems', ref => {
      return ref.limitToFirst(this.pageSize).orderByKey();
    }).valueChanges().map(Theorem.fromJsonList);

    // return this.af.list('theorems').valueChanges().map(Theorem.fromJsonList);

  }

  updatePageSize(num) {
    this.pageSizeChange.next(num);
  }

}

​

因此，在init上的bible.component.ts中，我调用名为'findAllTheorems‘的服务函数，并订阅返回的值，以便我的两个Theroem数组填充返回的值。侧注是我对这个订阅发生了什么的解释，对吗？这是否意味着如果'findAllTheorems‘返回的值发生变化，那么我的数组将动态更新？

无论如何，我想要的是，如何能够动态地改变我服务中的pageSize值，并让它更新页面，以便在用户滚动时显示更多的定理？这是最好的方法吗？总体，什么是在用户向下滚动时动态地将更多的项加载到列表中的最佳方法，以便每次他们到达底部的10个项目时加载到底部？我还有一个观察者，每当div的底部被击中时，它就会登录到控制台，这意味着我可以调用一个函数来添加更多的定理。

另外，findAllTheorems作为一个可观察的东西到底意味着什么？这实际上是说这个函数是开放的，可以订阅，这样其他函数或变量可以随时监视它的输出，并保持最新的状态吗？

谢谢你的帮助。

Answer 1

是的，您对订阅的解释是正确的，但您似乎没有将订阅存储在任何地方，这意味着您无法在组件被销毁后取消订阅。会导致内存泄漏。

试着做这样的事情：

 private subscription: Subscription;

 ngOnInit() {
    this.subscription = this.service.findAllTheorems()
      .subscribe(
        theorems => this.allTheorems = this.filtered = theorems
      );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

如果不想强制处理订阅，请尝试使用异步管道。它将为您处理订阅。看看文档。

至于无限滚动和动态加载内容，我将使用交叉口观测器。请确保包括一个多填充，因为全球浏览器的支持目前是75%左右。

使用AngularFire的基本实现如下所示：

1. 创建InfiniteScroll指令，当用户滚动到页面底部时发出该指令。
2. 使用AngularFire的动态查询在每次发出InfiniteScroll指令时运行一个新的查询。