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

【问题标题】：(Storybook & Angular) How to dynamically update args from the template(Storybook & Angular) 如何从模板动态更新参数
【发布时间】：2022-06-18 11:29:52
【问题描述】：

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

我有一个名为“clicked”的 arg，一旦单击按钮，它就会从 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 以使控件选项卡也更新吗？

【问题讨论】：

标签： angular storybook

【解决方案1】：

我正在使用 React 和 Typescript，但这是一般的想法。最主要的是导入 useArgs 函数并将其与您的组件连接起来。当然，您的处理程序的签名会略有不同

确保从 @storybook/client-api 而不是从 @storybook/api 导入 useArgs。

import { useArgs } from '@storybook/client-api'

const Template: ComponentStory<typeof Autocomplete> = (args) => {
  const [{ selected }, updateArgs] = useArgs()

  const handleChange = (e: any, v: any, r: any) => {
    if (selected !== v?.id) updateArgs({ selected: v?.id })
  }

  return <Autocomplete {...args} onChange={handleChange} />
}

export const Default = Template.bind({})
Default.args = {
  selected: 2,
  ....
}

【讨论】：