(Storybook & Angular) 如何从模板动态更新参数

Question

我在 Angular 应用程序中使用 Storybook，但遇到了问题args

我有一个名为“clicked”的参数，一旦单击按钮，它就会更新false为，请看一下：true

const Template: Story = (args) => ({
  props: args,
  template: `
    <button (click)="clicked = true">
      Default
    </button>
  `,
})

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

此更新不是双向的，因为当查看插件页面时，即使模板已成功更新它，该值似乎也没有改变。主要问题是，当尝试通过访问该值时Interactions，该值永远不会更新，并且我的测试失败。

所以，我的问题是 - 我可以以clicked控制选项卡也更新的方式进行更新吗？

Answer 1

我研究了他们的代码并设法实现了这一点：

import type { Channel } from "@storybook/channels";
import { UPDATE_STORY_ARGS } from "@storybook/core-events";

export const MyStory: StoryObj<MyComponent> = {
  render: (args, { id }) => {
    args.btnClicked = () => {
      const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel;
      channel.emit(UPDATE_STORY_ARGS, {
        storyId: id,
        updatedArgs: { clicked: true },
      });
    };

    ....