angular - 如何在 Angular 6 中使用 take(1)？

Question

有人可以说明 Angular 6/rxjs 6 中 take(1) 的语法吗？

在下面的代码中，我从 Firestore 中检索了一个文档，然后将其作为可观察对象提供。

然后我订阅该可观察对象，读取文档的时间戳，并将年龄格式化为人类可读的格式。这很好用，但是不需要每次文档流发生变化时都执行。它只需要执行一次，因为文档时间戳永远不会改变。

如何修改此代码以合并 take(1)，以便年龄字符串仅生成一次并且对 items 的订阅不会保持打开状态？我找不到 Angular/rxjs 版本 6 下 take(1) 语法的任何清晰示例。我能找到的所有示例都是针对以前版本的。

import { Component, Input, OnChanges } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Item } from '../../interfaces/item';

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

  @Input() itemId: string;
  private itemDoc: AngularFirestoreDocument<Item>;
  public item: Observable<Item>;
  public age: string;

  constructor(private afs: AngularFirestore) {}

  ngOnChanges() {

    if ( this.itemId ) {

      this.itemDoc = this.afs.doc<Item>('items/' + this.itemId);
      this.item = this.itemDoc.valueChanges();

      this.item.subscribe(thisitem => {
        this.age = Utils.getFormattedAgeString(thisitem.timestamp);
      });

    }

  }

}

Answer 1

您可以使用 Observable 管道函数将管道运算符应用于任何可观察对象，该函数将任意数量的管道运算符作为参数。例如，在您的情况下，您可以在订阅调用之前使用管道，如下所示:

  this.item
    .pipe(
      take(1)
      // and any other pipe operators like map if required
    )
    .subscribe(thisitem => {
      this.age = Utils.getFormattedAgeString(thisitem.timestamp);
    });

管道运算符的引入是为了更有效地利用 tree shaking 等功能，允许 bundle 优化器仅保留在代码中明确引用的管道函数的代码。

更多详细信息可以在 official docs 中找到.