Angular：如何判断新output()函数是否被监听

Angular 16+引入的output()函数返回OutputEmitterRef，确实没有像旧@Output()装饰器返回的EventEmitter那样直接提供observed属性。以下是两种可行的解决方案：

方案1：手动维护订阅计数（稳定无依赖） #

通过包装原生OutputEmitterRef的subscribe方法，自己跟踪订阅的数量，从而判断输出是否被监听。这种方法不依赖Angular内部私有属性，版本兼容性更好。

import { Component, OnInit, OutputEmitterRef, output } from '@angular/core';

export class TaskComponent implements OnInit {
  // 原生的output引用
  private readonly _taskStarted = output<number>();
  // 订阅计数
  private _subscriptionCount = 0;
  // 标记是否被监听
  private _isTaskStartedObserved = false;

  // 对外暴露的output引用，包装subscribe方法
  readonly taskStarted: OutputEmitterRef<number> = {
    emit: (value) => this._taskStarted.emit(value),
    subscribe: (observerOrNext, error, complete) => {
      // 订阅时增加计数并更新状态
      this._subscriptionCount++;
      this._isTaskStartedObserved = this._subscriptionCount > 0;

      const subscription = this._taskStarted.subscribe(observerOrNext, error, complete);
      
      // 重写unsubscribe方法，取消订阅时更新计数和状态
      const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
      subscription.unsubscribe = () => {
        originalUnsubscribe();
        this._subscriptionCount--;
        this._isTaskStartedObserved = this._subscriptionCount > 0;
      };

      return subscription;
    }
  };

  ngOnInit() {
    // 在这里判断是否被监听
    console.log('是否被监听:', this._isTaskStartedObserved);
  }

  taskStartedClick(id: number) {
    this.taskStarted.emit(id);
  }
}

方案2：利用Angular内部Subject（简洁但有版本风险） #

OutputEmitterRef内部实际上是基于RxJS的Subject实现的，通过访问其私有_subject属性，可以直接获取observed状态。但注意：私有属性可能在Angular后续版本中变更，存在兼容性风险。

首先创建一个自定义的output工具函数：

import { OutputEmitterRef, output as angularOutput } from '@angular/core';
import { Subject } from 'rxjs';

// 封装带有observed属性的output函数
export function outputWithObserved<T>(): OutputEmitterRef<T> & { observed: boolean } {
  const originalOutput = angularOutput<T>();
  // 访问内部私有subject
  const internalSubject = (originalOutput as any)._subject as Subject<T>;

  return {
    ...originalOutput,
    // 动态返回是否有订阅
    get observed() {
      return internalSubject.observed;
    }
  };
}

然后在组件中使用：

import { Component, OnInit } from '@angular/core';
import { outputWithObserved } from './your-path';

export class TaskComponent implements OnInit {
  // 使用自定义的output函数
  readonly taskStarted = outputWithObserved<number>();

  ngOnInit() {
    // 直接访问observed属性
    console.log('是否被监听:', this.taskStarted.observed);
  }

  taskStartedClick(id: number) {
    this.taskStarted.emit(id);
  }
}

注意事项 #

• 方案1虽然代码稍多，但完全不依赖Angular内部实现，适合长期维护的项目。
• 方案2更简洁，但依赖私有属性，若Angular更新调整内部实现，可能需要同步修改代码。

内容的提问来源于stack exchange，提问作者T. Jami