Angular 4中能否将两个输出事件绑定至同一函数？

嘿，这个问题我之前在项目里也纠结过！先直接给你结论：Angular 4的模板语法不支持像(click, keydown.enter)="doMagic()"这样用逗号分隔多个事件绑定的写法——这种语法是无效的，Angular根本识别不了。不过别担心，有几个不用@HostListener的替代方案可以帮你避免模板里重复写函数调用：

方案1：封装自定义按钮组件（推荐） #

把需要绑定多个事件的逻辑封装成一个可复用的子组件，对外暴露一个统一的输出事件，这样父组件使用时只需要绑定一次就行。

步骤1：创建自定义按钮组件 #

// custom-action-button.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-action-button',
  template: `
    <input 
      type="button" 
      [value]="buttonText"
      (click)="triggerAction()"
      (keydown.enter)="triggerAction()"
    >
  `
})
export class CustomActionButtonComponent {
  @Input() buttonText: string = '';
  @Output() onAction = new EventEmitter<void>();

  triggerAction() {
    this.onAction.emit();
  }
}

步骤2：在父组件中使用 #

<!-- 父组件模板 -->
<app-action-button buttonText="send" (onAction)="doMagic()"></app-action-button>

这样你只需要在父组件里写一次(onAction)="doMagic()"，所有事件逻辑都封装在子组件里，后续其他地方需要同样的按钮时也能直接复用。

方案2：通过ViewChild手动绑定原生事件 #

如果不想封装组件，也可以在组件类里通过ViewChild获取DOM元素，手动添加原生事件监听器，这样模板里不用写任何事件绑定：

步骤1：模板中添加引用变量 #

<!-- 父组件模板 -->
<input #sendBtn type="button" value="send">

步骤2：组件类中绑定事件 #

// 父组件类
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('sendBtn') sendButton: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    const btnElement = this.sendButton.nativeElement;
    
    // 绑定click事件
    btnElement.addEventListener('click', () => this.doMagic());
    
    // 绑定keydown.enter事件
    btnElement.addEventListener('keydown', (event: KeyboardEvent) => {
      if (event.key === 'Enter') {
        this.doMagic();
      }
    });
  }

  doMagic() {
    // 这里写你的业务逻辑
    console.log('Magic done!');
  }
}

补充说明 #

为什么Angular不支持逗号分隔事件？因为Angular的事件绑定语法(eventName)是专门针对单个事件设计的，它会把事件转换成Angular自己的事件流（和原生事件有区别，比如会触发变更检测），所以暂时没有支持多事件合并绑定的语法。

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