W Angular tapoperator w RxJS służy do wykonywania efektów ubocznych dla każdej emitowanej wartości z obserwowalnego strumienia, bez modyfikowania lub przekształcania samych wartości. Oto jak możesz użyć tapw Angular:

1. Zaimportuj tapoperatora z RxJS za pomocą następującej instrukcji importu:

import { tap } from 'rxjs/operators';

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-users',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UsersComponent implements OnInit {
  users: any[];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers()
      .pipe(
        tap(user => console.log(user))
      )
      .subscribe(users => this.users = users);
  }
}

1. Logowanie obserwowalnych

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

const observable = of(1, 2, 3);

observable
  .pipe(
    tap(value => console.log(`Value emitted: ${value}`))
  )
  .subscribe();

2. Modyfikowanie stanu

Innym przypadkiem użycia tap()jest modyfikacja stanu poza Obserwowalnym. Oto przykład, jak możesz użyć tap()do zwiększenia licznika dla każdej wartości emitowanej przez Observable:

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

let counter = 0;

const observable = of(1, 2, 3);

observable
  .pipe(
    tap(() => counter++)
  )
  .subscribe();

console.log(`Counter value: ${counter}`); // Output: Counter value: 3

3. Obserwowalne debugowanie

tap()może być również przydatny do debugowania Observables. Na przykład możesz użyć tap()do zarejestrowania początku i końca Obserwowalnego, a także wszelkich występujących błędów:

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

const observable = of(1, 2, 3);

observable
  .pipe(
    tap({
      next: value => console.log(`Value emitted: ${value}`),
      complete: () => console.log('Observable completed'),
      error: error => console.log(`Error: ${error}`)
    })
  )
  .subscribe();

Mam nadzieję, że te przykłady pomogą Ci zrozumieć, jak używać tap()operatora w RxJS!

Kodowanie na wyższym poziomie

Dziękujemy za bycie częścią naszej społeczności! Zanim pójdziesz:

• Klaskajcie za relację i śledźcie autora
• Zobacz więcej treści w publikacji Level Up Coding
• Bezpłatny kurs rozmowy o kodowaniu ⇒ Zobacz kurs
• Śledź nas: Twitter | LinkedIn | Biuletyn