В Angular tapоператор RxJS используется для выполнения побочных эффектов для каждого испускаемого значения из наблюдаемого потока без изменения или преобразования самих значений. Вот как вы можете использовать tapв Angular:

1. Импортируйте tapоператор из RxJS, используя следующий оператор импорта:

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. Регистрация наблюдаемых

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. Изменение состояния

Другой вариант использования tap()— изменение состояния за пределами Observable. Вот пример того, как вы можете использовать tap()для увеличения счетчика для каждого значения, испускаемого 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. Отладка наблюдаемых

tap()также может быть полезно для отладки Observables. Например, вы можете использовать tap()для регистрации начала и конца Observable, а также любых возникающих ошибок:

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

Я надеюсь, что эти примеры помогут вам понять, как использовать tap()оператор в RxJS!

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

• Хлопайте за историю и подписывайтесь на автора
• Смотрите больше контента в публикации Level Up Coding
• Бесплатный курс собеседования по программированию ⇒ Посмотреть курс
• Подписывайтесь на нас: Твиттер | Линкедин | Новостная рассылка