Angular中能否用Signal替代Event Emitter实现子组件向父组件传值？

完全可以用Signal替代Event Emitter实现子组件向父组件传递数据，而且逻辑更简洁，还能借助Signal的响应式特性自动同步数据，无需手动处理订阅与取消订阅。

实现方案 #

方案一：子组件暴露Signal，父组件监听变化 #

子组件定义一个Signal存储需要传递的数据，父组件通过ViewChild获取子组件实例后，用effect监听Signal的变化并同步到自身数据中。

子组件代码

// child.component.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<input type="text" (input)="updateData($event)">`
})
export class ChildComponent {
  // 用于传递数据的Signal
  public childData = signal('');

  updateData(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.childData.set(value);
  }
}

父组件代码

// parent.component.ts
import { Component, ViewChild, AfterViewInit, effect } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <p>子组件传递的数据：{{ parentData() }}</p>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComp!: ChildComponent;
  public parentData = signal('');

  ngAfterViewInit() {
    // 监听子组件Signal变化，自动更新父组件数据
    effect(() => {
      this.parentData.set(this.childComp.childData());
    });
  }
}

方案二：父组件传递Signal给子组件，子组件直接更新 #

这种方式耦合度更低，父组件将自身的Signal通过输入属性传给子组件，子组件直接修改该Signal的值，父组件会自动响应变化。

父组件代码

// parent.component.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [sharedSignal]="parentData"></app-child>
    <p>子组件更新的数据：{{ parentData() }}</p>
  `
})
export class ParentComponent {
  public parentData = signal('');
}

子组件代码

// child.component.ts
import { Component, Input } from '@angular/core';
import { signal } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<input type="text" (input)="updateSharedData($event)">`
})
export class ChildComponent {
  @Input() sharedSignal!: ReturnType<typeof signal<string>>;

  updateSharedData(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    // 直接更新父组件传递的Signal
    this.sharedSignal.set(value);
  }
}

注意事项 #

• 方案二更符合Angular组件解耦的设计理念，优先推荐使用。
• Signal的变化会自动触发响应式更新，无需手动管理订阅生命周期，避免了Event Emitter可能带来的内存泄漏问题。
• 除了简单的字符串/数值，Signal也支持传递复杂对象或函数，满足各类数据传递需求。

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