Angular 18使用新Output API触发点击事件报错，求解决

你遇到的错误是因为Angular未识别到action作为组件的输出事件，核心原因是使用新output() API时，组件未正确配置输出暴露方式，以下是两种可行解决方案：

方案一：添加@Output()装饰器 #

如果你的组件未启用信号式模式，需要给action属性加上@Output()装饰器，让Angular将其识别为输出事件：

修改button.component.ts：

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

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  // 根据你的项目配置添加其他元数据（如standalone: true）
})
export class ButtonComponent {
  @Output()
  public action = output<void>();
  
  onClick(): void {
    this.action.emit();
  }

  // 你的getClasses、getType等输入相关方法保持不变
}

方案二：启用信号式组件模式 #

Angular 18的信号式组件会自动识别output()创建的属性为输出事件，无需额外@Output()装饰器。只需在组件元数据中添加signals: true：

修改button.component.ts：

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

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  standalone: true, // 独立组件请保留，非独立组件可删除
  signals: true // 开启信号式组件模式
})
export class ButtonComponent {
  public action = output<void>();
  
  onClick(): void {
    this.action.emit();
  }

  // 建议同步将输入改为信号式写法（可选，更符合新API规范）
  classes = input<string>('');
  text = input<string>('');
  type = input<string>('button');
  isLoading = input<boolean>(false);
  loadingText = input<string>('Loading...');

  // 此时模板可直接使用信号值，无需getter方法，例如：
  // [class]="classes" 替代 [class]="getClasses()"
}

完成上述任一修改后，父组件中(action)="login()"的绑定即可正常触发login()函数。

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