Angular传递@Output时如何避免重复创建EventEmitter

没问题，有几种简洁的方式能帮你消除冗余的事件处理函数和重复的EventEmitter触发：

方法1：直接绑定EventEmitter的emit方法 #

这是改动最小的方案——你不需要在FormComponent里写handleDiscard中间函数，直接把组件的onDiscard.emit绑定到子组件的onDiscard事件上即可：

修改后的FormComponent代码：

@Component({
  selector: 'app-form',
  template: `
        <form [formGroup]="nametagForm" (ngSubmit)="handleSubmit()">
            ...
            <!-- 直接绑定emit方法，跳过中间函数 -->
            <app-form-actions (onDiscard)="onDiscard.emit()"></app-form-actions>
        </form>
    `,
  styleUrls: []
})
export class FormComponent implements OnInit {
  ...
  @Output()
  onDiscard = new EventEmitter<void>()

  // 删掉多余的handleDiscard函数
}

这样FormActionsComponent触发onDiscard事件时，会直接调用FormComponent的onDiscard.emit()，完全省去中间层的处理逻辑。

方法2：用@Input传递回调函数（彻底消除多层EventEmitter） #

如果想完全去掉两层EventEmitter的嵌套，可以直接把父组件的回调函数通过FormComponent传递给FormActionsComponent：

1. 给FormActionsComponent添加输入属性接收回调：

@Component({
  selector: 'app-form-actions',
  template: `
        <div class="form-actions">
            <!-- 直接调用传入的回调 -->
            <button (click)="onDiscardCallback?.()" type="button">Discard</button>
            <button [disabled]="formControl.invalid" type="submit">Save</button>
        </div>
    `,
  styleUrls: []
})
export class FormActionsComponent implements OnInit {
  private formControl: FormGroup
  // 新增输入属性接收外部回调
  @Input() onDiscardCallback?: () => void

  constructor(private readonly rootFormGroup: FormGroupDirective) { }

  ngOnInit(): void {
    this.formControl = this.rootFormGroup.control
  }

  // 删掉原来的onDiscard EventEmitter和handleDiscard函数
}

2. 修改FormComponent，把父组件传来的回调直接传递给子组件：

@Component({
  selector: 'app-form',
  template: `
        <form [formGroup]="nametagForm" (ngSubmit)="handleSubmit()">
            ...
            <!-- 直接传递父组件的回调 -->
            <app-form-actions [onDiscardCallback]="onDiscard"></app-form-actions>
        </form>
    `,
  styleUrls: []
})
export class FormComponent implements OnInit {
  ...
  // 这里改为@Input接收父组件的回调
  @Input() onDiscard?: () => void
}

3. 父组件用法调整为绑定输入属性：

@Component({
  selector: 'app-parent',
  templateUrl: `
        <app-form ... [onDiscard]="handleDiscard"></app-form>
    `,
  styleUrls: []
})
export class ParentComponent implements OnInit {    
  ...
  handleDiscard(): void { // do something ... }
}

这种方式彻底去掉了两层EventEmitter，直接通过回调传递逻辑，代码更简洁，组件间的依赖关系也更清晰。

总结 #

如果只是想省去中间的处理函数，方法1最省心，改动几行代码就能解决；如果想优化组件通信结构，方法2是更干净的选择。

内容的提问来源于stack exchange，提问作者m.rufca