Angular 17中@Output别名设置失败，报参数类型错误

问题根源 #

Angular 17更新了@Output装饰器的参数规则——不再接受{ alias: string }格式的对象参数，要么直接传别名字符串，要么用新的信号式输出API。

方案1：沿用传统EventEmitter写法 #

直接把别名字符串作为@Output的参数传入，替换原来的对象写法：

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-custom-btn',
  templateUrl: './custom-btn.component.html',
  styleUrl: './custom-btn.component.scss'
})
export class CustomBtnComponent {
  // 直接传入别名字符串替代对象
  @Output('onClick') clickBtnProject = new EventEmitter();

  clickBtn() {
    this.clickBtnProject.emit();
  }
}

修改后，外部组件可以通过(onClick)绑定事件，内部依旧用clickBtnProject触发事件，逻辑完全兼容。

方案2：使用Angular 16+推荐的信号式Output #

如果想跟进新特性，用output()函数配合别名配置：

import { Component, output } from '@angular/core';

@Component({
  selector: 'app-custom-btn',
  templateUrl: './custom-btn.component.html',
  styleUrl: './custom-btn.component.scss'
})
export class CustomBtnComponent {
  // 信号式output支持{ alias: 'xxx' }配置
  clickBtnProject = output({ alias: 'onClick' });

  clickBtn() {
    this.clickBtnProject.emit();
  }
}

这是Angular官方推荐的新写法，更贴合信号式编程范式。

父组件使用示例 #

两种方案的外部调用方式一致，直接用别名绑定事件：

<app-custom-btn (onClick)="handleBtnClick()"></app-custom-btn>

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