如何在Angular中通过Signal将变量值以@Output方式输出？

问题背景 #

假设我们有如下组件代码（修正原代码的语法错误后）：

$foo = signal<string>('');

@Output() fooChanged: EventEmitter<string> = new EventEmitter<string>();

需要实现当$foo的值发生变化时，通过fooChanged这个@Output向外发射最新的值，目前有两种思路但存在疑问：

• 使用effect：担心滥用这个API
• 使用computed：不清楚正确的实现方式

解决方案分析 #

1. 使用effect（推荐场景） #

虽然Angular官方建议尽可能避免不必要的effect，但向外发射输出事件属于响应式副作用场景，是effect的合理使用场景。

基础实现

在组件的初始化生命周期（比如ngOnInit）中创建effect，监听$foo的变化并触发输出：

import { Component, Output, EventEmitter, signal, effect, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<!-- 组件模板 -->`
})
export class ExampleComponent implements OnInit {
  $foo = signal<string>('');
  @Output() fooChanged: EventEmitter<string> = new EventEmitter<string>();

  ngOnInit(): void {
    effect(() => {
      const currentValue = this.$foo();
      this.fooChanged.emit(currentValue);
    });
  }

  // 示例：修改$foo的方法
  updateFoo(newValue: string): void {
    this.$foo.set(newValue);
  }
}

避免初始化时触发事件

默认情况下，effect会在初始化时执行一次（因为读取了$foo()），如果不需要初始化时发射事件，可以添加首次执行判断：

ngOnInit(): void {
  let isFirstExecution = true;
  
  effect(() => {
    const currentValue = this.$foo();
    if (!isFirstExecution) {
      this.fooChanged.emit(currentValue);
    }
    isFirstExecution = false;
  });
}

2. 使用computed（不适合当前场景） #

computed的核心作用是基于依赖信号派生新的纯计算信号，它的回调函数必须是纯函数（不能包含副作用操作）。而发射@Output事件属于副作用，因此computed无法实现需求，这个思路不适用。

备选方案：在修改信号时直接发射事件 #

如果$foo的所有修改都通过组件内的特定方法触发，可以在修改信号的同时直接发射事件：

updateFoo(newValue: string): void {
  this.$foo.set(newValue);
  this.fooChanged.emit(newValue);
}

但这种方式的局限性在于：如果$foo可能被其他未知逻辑修改（比如异步操作、第三方指令等），则会漏掉变化的事件发射，可靠性不如effect方案。

内容的提问来源于stack exchange，提问作者Raphaël Balet