Angular中子组件传值给父组件：EventEmitter与Service哪个更合适？

方案1：EventEmitter 或 父组件主动获取 #

• 如果子组件的三个数据是动态更新的（比如用户输入时实时变化），可以在子组件用EventEmitter，每当数据变更时触发emit，把数据传给父组件。父组件接收后暂存数据，点击提交按钮时直接用这些数据生成档案。这种方式完全合规，不是代码异味——提交动作属于父组件的职责（毕竟按钮在父组件），子组件只负责收集和传递数据，逻辑分工清晰。

• 哪怕子组件没有按钮，也能触发emit，比如在输入控件的(ngModelChange)事件里调用emit方法：

  // 子组件代码示例
  @Input() name: string;
  @Input() date: Date;
  @Input() age: number;
  @Output() dataUpdated = new EventEmitter<{name: string; date: Date; age: number}>();
  
  onNameUpdated(newName: string) {
    this.name = newName;
    this.sendCurrentData();
  }
  
  // date、age的变更处理逻辑类似
  private sendCurrentData() {
    this.dataUpdated.emit({
      name: this.name,
      date: this.date,
      age: this.age
    });
  }
  

  父组件订阅dataUpdated事件，把数据存到自身变量中，提交时直接取用即可。

• 要是不需要实时同步数据，只在提交时一次性获取，还可以用@ViewChild让父组件直接获取子组件的当前数据。这种方式更直接，同样不存在代码异味，毕竟提交动作由父组件主导，逻辑一目了然。

方案2：共享Service #

• 共享Service更适合跨层级组件（比如非父子、兄弟组件）或者多组件共享同一状态的场景。如果只是单纯的父子组件传值，用Service反而会增加不必要的复杂度——父子组件本身就有更直接的通信方式，没必要引入额外的状态管理层。
• 就算用Service实现，无非是子组件把数据更新到Service，父组件从Service读取数据再提交。这种做法可行，但属于过度设计，不如前两种方案简洁。

总结 #

你的场景下，优先选EventEmitter（实时同步）或@ViewChild（提交时一次性获取），这两种都是Angular组件通信的最佳实践，完全不存在代码异味。共享Service只在更复杂的跨组件通信场景下才有必要考虑。

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