Angular应用Storybook如何动态更新模板args并同步Controls面板

根本原因 #

模板内直接写(click)="clicked = true"的写法，只会修改当前渲染组件实例上的本地props副本，不会同步更新Storybook全局维护的args状态。

Controls面板、Interactions测试插件读取的始终是Storybook托管的全局args状态，不是组件内部的临时变量值，所以会出现内部值改了但面板没更新、测试拿不到新值的问题。

正确实现方式 #

必须调用Storybook官方提供的updateArgs方法主动触发全局状态更新，不能直接在模板里给arg硬赋值。参考修改后的代码：

const Template: Story = (args, { updateArgs }) => ({
  props: {
    ...args,
    // 把状态更新方法透传到模板可访问的作用域
    onButtonClick: () => updateArgs({ clicked: true })
  },
  template: `
    <button (click)="onButtonClick()">
      Default
    </button>
  `,
})

export const Primary = Template.bind({})
Primary.args = {
  clicked: false,
}

效果说明 #

• 点击按钮后updateArgs会直接更新全局args状态，Controls面板中clicked字段会自动同步为true
• Interactions插件执行测试时读取到的args值也会是最新值，不会再出现拿旧值导致用例失败的问题
• 注意不要直接修改透传进去的args对象属性，Angular的变更检测不会把这类修改冒泡到Storybook状态层，必须显式调用updateArgsAPI完成更新

问题截图

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