RxJS 如何监听Subject订阅者数量变化以控制搜索框显隐

核心问题本质 #

直接读取原生Subject的observers.length没法实现响应式的显隐控制：这个属性是静态的即时值，订阅、退订动作发生时不会主动推送状态变化，无法直接驱动视图更新。需要通过统一的订阅拦截层，把订阅数的变化转成可订阅的响应式流，才能支撑UI逻辑。

具体实现步骤 #

1. 封装带计数追踪能力的搜索服务 #

把搜索用的Subject收敛在根注入的服务里，对外提供统一的订阅入口，在入口层拦截所有订阅、退订动作，实时更新订阅计数：

import { Injectable } from '@angular/core';
import { Subject, BehaviorSubject, Subscription, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SearchService {
  // 承载跨组件搜索关键词传递的核心Subject
  private readonly searchSource$ = new Subject<string>();
  // 追踪订阅总数的状态流，初始值为0（无任何订阅者）
  private readonly subscriberCount$ = new BehaviorSubject<number>(0);
  // 对外暴露只读的订阅数流，禁止外部直接修改状态
  public readonly currentSubscriberCount$: Observable<number> = this.subscriberCount$.asObservable();

  /**
   * 统一的搜索事件订阅入口，所有需要搜索能力的组件必须通过这个方法订阅
   */
  public subscribeToSearch(handler: (searchText: string) => void): Subscription {
    // 新订阅接入时，订阅数+1并推送最新状态
    const currentCount = this.subscriberCount$.value;
    this.subscriberCount$.next(currentCount + 1);

    // 实际建立对核心Subject的订阅
    const subscription = this.searchSource$.subscribe(handler);
    // 重写退订方法，组件执行退订时自动将订阅数-1
    const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
    subscription.unsubscribe = () => {
      const updatedCount = this.subscriberCount$.value;
      this.subscriberCount$.next(updatedCount - 1);
      originalUnsubscribe();
    };

    return subscription;
  }

  /**
   * 给搜索输入框调用，推送最新的搜索关键词
   */
  public emitSearchText(text: string): void {
    this.searchSource$.next(text);
  }
}

2. 导航栏组件绑定计数流控制搜索框显隐 #

导航栏不需要关心具体有哪些组件支持搜索，只需要根据追踪流的数值判断是否渲染搜索框即可：

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { SearchService } from './search.service';

@Component({
  selector: 'app-navbar',
  template: `
    <input 
      *ngIf="showSearchInput$ | async"
      type="text"
      placeholder="输入关键词过滤"
      (input)="handleInput($event)">
  `
})
export class NavbarComponent {
  // 映射订阅数为布尔值：只要订阅数大于0就显示搜索框
  public readonly showSearchInput$: Observable<boolean> = 
    this.searchService.currentSubscriberCount$.pipe(
      map(count => count > 0)
    );

  constructor(private searchService: SearchService) {}

  private handleInput(event: Event): void {
    const inputText = (event.target as HTMLInputElement).value;
    this.searchService.emitSearchText(inputText);
  }
}

3. 支持搜索的业务组件按规范订阅 #

所有需要响应搜索逻辑的组件，必须通过服务提供的统一入口完成订阅，不要直接订阅内部的searchSource$，否则会导致计数不准：

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { SearchService } from './search.service';

@Component({ selector: 'app-data-list' })
export class DataListComponent implements OnDestroy {
  private searchSubscription: Subscription;

  constructor(private searchService: SearchService) {
    // 组件初始化时通过统一入口订阅搜索事件
    this.searchSubscription = this.searchService.subscribeToSearch((keyword) => {
      // 执行列表数据过滤逻辑
      console.log('收到搜索关键词：', keyword);
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时正常退订即可，计数会自动同步
    this.searchSubscription.unsubscribe();
  }
}

落地注意事项 #

• 必须强制约束所有搜索功能的使用方走统一订阅入口，一旦有组件绕过入口直接订阅内部Subject，就会出现计数和实际订阅数不匹配的问题，导致显隐逻辑失效。
• 用BehaviorSubject做计数追踪的好处是，导航栏组件不管在什么时机初始化，都能拿到当前最新的订阅数，不会出现首屏状态不同步的问题。
• 不要直接读取原生Subject的observers.length做判断：这个值没有响应式能力，且无法追踪绕过统一入口的非法订阅，可靠性远低于主动拦截计数的方案。

内容的提问来源于stack exchange，提问作者MeIr