Как использовать take (1) в Angular 6?

Может кто-нибудь проиллюстрировать синтаксис take (1) в Angular 6 / rxjs 6?

В приведенном ниже коде я извлекаю документ из Firestore и затем делаю его доступным как наблюдаемое.

Затем я подписываюсь на это наблюдаемое, читаю временную метку документа и форматирую возраст в удобочитаемом формате. Это отлично работает, однако его не нужно выполнять каждый раз, когда в потоке документов есть изменения. Его нужно выполнить только один раз, поскольку временная метка документа никогда не изменится.

Как я могу изменить этот код, чтобы включить take(1), чтобы строка возраста генерировалась только один раз, а подписка на items не оставалась открытой? Я не могу найти четкого примера синтаксиса для take(1) в Angular / rxjs версии 6. Все примеры, которые я могу найти, относятся к предыдущим версиям.

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

    }

  }

}

angular rxjs rxjs6 rxjs-pipeable-operators
person Derrick Miller    schedule 04.08.2018    source источник
comment
angular.io/guide/rx-library#operators, github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md < / а>   -  person JB Nizet    schedule 05.08.2018

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете применять операторы конвейера к любому наблюдаемому объекту с помощью функции Observable pipe, которая принимает любое количество операторов конвейера в качестве аргументов. Например, в вашем случае вы можете использовать канал прямо перед вызовом подписки следующим образом:

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

Операторы конвейера были введены для более эффективного использования таких функций, как встряхивание дерева, позволяя оптимизаторам пакетов сохранять код только для функций конвейера, на которые явно ссылаются в коде.

Более подробную информацию можно найти в официальных документах.

person Anton Sorokin    schedule 04.08.2018