3

我有一项服务可以获取文档并将其元数据列出在可以正常工作的页面上。我想实现“无限滚动”并查看了npm i angular2-infinite-scroll

目前我正在使用一个可观察的文档和*ngFor循环中的异步管道

文档列表.ts

export class DocumentList implements OnInit {
    documents: Observable<Array<Document>>;
    chunck: number = 100;
    from: number = 0;
    keyword: string = "";

    constructor(private _documentService: DocumentService) {}

    ngOnInit() {
    this.documents = this._documentService.getDocuments(this.chunck, this.from, this.keyword);
    }
}

使用 angular2-infinite-scroll 我有一个函数，当我滚动到页面底部时会调用它，我想要做的是获取更多文档并在页面上显示它们的元数据以及已经存在的内容

onScroll() {
this.from = documents.length ... ?
//this.documents = this._documentService.getDocuments(this.chunck, this.from, this.keyword);
}

我不确定当我使用 observable 时这是否可行？如果我对文档使用简单的数组，documents: Document[]我可以做类似的事情

onScroll() {
this._documentService.getDocuments(this.chunck, this.from, this.keyword)
    .subscribe(documents => this.documents.push(documents));
}

还有其他想法吗？

4

1 回答 1

1

您可以使用 Subject 而不是 Observable 来尝试它。我会尝试类似...

对于您的 DocumentsService：

import { Subject } from 'rxjs/Rx';

export class DocumentService {
  _documentSubject = Subject.create();

  getNextTen() {
    // ... get the document meta data however ... 
    this._documentSubject.next(documentMetaData);
  }

  get documentSubject() {
    return this._documentSubject;
  }

  //...
}

然后在您的文档组件上，您将执行以下操作：

 // ...
documents: Array = [];
documentRetriever: Subject<any>;

constructor(ds: DocumentService) {
  //You maybe shouldn't do this in the constructor, but the point is
  //you only want to subscribe to the Subject once.
  this.documentRetriver = ds.documentSubject;
  this.documentRetriever.subscribe(newDocuments => {
    this.documents.push(newDocuments);
  })
}
onScroll() {
  this.ds.getNextTen();
}

由于 RxJS Subjects 的性质（它们同时充当 Observables 和 Observers），您可以在创建 Observable 之外通过 .next() 传递数据。

绑定到文档数组时，您可能仍需要也可能不需要使用异步管道。

有关主题的更多信息：

ReactiveX 文档

RxJS 入门：主题

于 2016-08-15T01:34:57.607 回答