Angular按钮组件EventEmitter无法触发Storybook Actions如何解决？

问题核心是输出属性名大小写不匹配：你的组件中@Output的名称是buttonclick（小写字母c），但在Storybook的argTypes里写的是buttonClick（大写字母C），导致Storybook无法识别对应的输出事件，因此Actions标签页没有触发记录。

修正步骤 #

1. 统一输出属性名的大小写 #

修改button.stories.ts中的argTypes，将属性名改为和组件中一致的buttonclick：

import { Story, Meta } from '@storybook/angular';
import { ButtonComponent } from './button.component';

export default {
  title: 'Components/Button',
  component: ButtonComponent,
  // 修正属性名，和组件的@Output保持一致
  argTypes: { buttonclick: { action: '按钮被点击' } },
} as Meta;

const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {};

2. 验证效果 #

重新启动Storybook，点击按钮后，Actions标签页就会显示按钮被点击的事件记录，同时控制台的clicked日志也会正常输出。

额外说明 #

如果后续需要传递参数，只需在组件的emit()中传入数据，比如this.buttonclick.emit('保存按钮')，Storybook的Actions会自动捕获并显示传递的参数。

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