对活动的Angular httpClient调用进行计数，以显示使用rxjs操作符加载微调器

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { tap, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-http-counter',
  template: `
    <div>
      <p>Active HTTP Requests: {{ activeRequests$ | async }}</p>
      <button (click)="makeRequest()">Make Request</button>
    </div>
  `
})
export class HttpCounterComponent implements OnInit {
  private activeRequestsSubject = new BehaviorSubject<number>(0);
  activeRequests$: Observable<number> = this.activeRequestsSubject.asObservable();

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Initialize with 0 active requests
    this.activeRequestsSubject.next(0);
  }

  makeRequest(): void {
    // Increment the active requests count
    this.activeRequestsSubject.next(this.activeRequestsSubject.value + 1);

    this.http.get('https://api.example.com/data')
      .pipe(
        tap(() => {
          // Decrement the active requests count on success
          this.activeRequestsSubject.next(this.activeRequestsSubject.value - 1);
        }),
        startWith(null) // Ensure the counter updates immediately
      )
      .subscribe();
  }
}