Storybook无法调用Angular组件点击事件函数及异常现象求助

问题描述 #

使用Storybook展示Angular组件时，点击绑定的组件函数未执行——仅Storybook的Actions标签页会记录点击事件，控制台无console.log输出，后续业务逻辑也不运行。

组件代码示例：
sample.component.ts

onClickFunc(): void {
    console.log('clicked');
    // 其他业务逻辑
}

sample.component.html

<div (click)="onClickFunc()">
    Some content
</div>

特殊现象：保持Storybook服务器运行时，同时修改ts和html文件中的函数名称（如改为onClickNewFunc），功能恢复正常——Actions标签不再记录事件，控制台能看到log，逻辑正常执行；但重启Storybook服务器后，问题会再次出现。

原因分析 #

问题根源是Storybook的Actions插件自动拦截了与组件函数名匹配的DOM事件，阻止了组件自身的函数执行。热更新时修改函数名后，新名称不在插件的初始拦截列表中，因此组件逻辑能正常触发；重启服务器后，插件重新初始化并捕获原事件名，导致问题重现。

解决方案 #

1. 移除全局事件监听装饰器 #

检查你的Story配置，若使用了actions装饰器全局监听click事件（如下方代码），会导致插件拦截所有点击事件，覆盖组件自身的绑定：

// 错误示例：不要全局监听click事件
export const Default = {
  decorators: [actions('click')],
};

直接移除该装饰器，或仅监听组件自定义输出事件（而非原生DOM事件）。

2. 禁用Storybook Angular插件的自动事件捕获 #

在.storybook/main.js/main.ts中修改Angular插件配置，关闭自动DOM事件捕获：

module.exports = {
  addons: [
    {
      name: '@storybook/addon-angular',
      options: {
        enableIvy: true,
        autoActions: false, // 禁用自动事件捕获
      },
    },
  ],
};

3. 手动绑定组件点击事件 #

在Story的渲染函数中明确指定组件的点击绑定，避免依赖自动映射：

import { SampleComponent } from './sample.component';

export const Default = {
  component: SampleComponent,
  render: (args) => ({
    props: args,
    template: `<app-sample (click)="onClickFunc()"></app-sample>`,
  }),
};

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