Angular中如何结合Signals使用EventEmitters？

问题场景 #

当尝试在effect中触发EventEmitter，且父组件在事件处理函数中更新Signal时，控制台会报错：writing to signals is not allowed in a computed or an effect，事件无法正常触发。

子组件代码 #

class SimpleComponent {
  @Output countChanged: EventEmitter<number> = new EventEmitter<number>();

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      totalCount: new FormControl<number>(0),
    });

    // 希望在表单值变化时输出事件
    const formSelection = toSignal(this.form.get('totalCount').valueChanges, { initialValue: 0 });
    effect(() => {
      const selection = formSelection()
      if (selection != 0) {
         // 当父组件更新Signal时调用失败
         this.countChanged.emit(selection) 
      }
    });
  }
}

父组件代码 #

<!-- 模板 -->
<simple-component 
   (countChanged)="handleCountChange($event)"
 ></simple-component>

// 组件类
mySignal = signal(0);

handleCountChanged(count: number) {
   this.mySignal.set(count); // Angular不允许此操作
}

错误原因 #

Angular的effect是响应式副作用函数，默认禁止在其执行上下文链中修改Signal，目的是防止意外的循环更新或变更检测问题。这里父组件的handleCountChanged在effect触发的countChanged事件中执行，属于effect的执行链，因此更新Signal会触发报错。

解决方案 #

• 使用untracked隔离emit操作
  untracked会让包裹的操作脱离当前effect的跟踪上下文，父组件的Signal更新不会被关联到effect的执行流程中，从而避免报错：

  effect(() => {
    const selection = formSelection();
    if (selection !== 0) {
      untracked(() => {
        this.countChanged.emit(selection);
      });
    }
  });
  

  这是相对安全的方案，明确隔离了副作用中可能触发Signal变更的部分。

• 给effect添加allowSignalWrites: true选项
  通过配置选项放宽effect的限制，允许其执行链中修改Signal，但需要自行确保不会出现循环更新的情况：

  effect(() => {
    const selection = formSelection();
    if (selection !== 0) {
      this.countChanged.emit(selection);
    }
  }, { allowSignalWrites: true });
  

• 直接订阅Observable（推荐替代方案）
  如果不需要将表单值转为Signal，直接订阅valueChanges Observable是更直观的方式，避免effect的限制：

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      totalCount: new FormControl<number>(0),
    });
  
    this.form.get('totalCount').valueChanges.pipe(
      filter(selection => selection !== 0)
    ).subscribe(selection => {
      this.countChanged.emit(selection);
    });
  }
  

最佳实践建议 #

• 若坚持使用Signal和effect，优先选择untracked方案，它能更清晰地隔离副作用边界，降低意外问题的风险。
• 若只是需要监听表单值变化触发事件，直接订阅Observable的方式更符合Angular传统响应式编程习惯，无需引入effect的限制。

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