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);
    });

引入了管道运算符，以更有效的方式利用树抖动等功能，允许捆绑优化器仅保留在代码中显式引用的管道函数的代码。

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

如何在Angular 6中使用take（1）？

1 个答案: