Storybook MDX中Angular带内容投影组件的参数传递问题

首先检查你第一种写法的标签闭合错误：你写的是<<</inline-alert>，多了一个多余的<，修正后应该可以同时实现参数传递和内容投影：

<Canvas>
  <Story
    name="Primary"
    args={{
      severity: "error"
    }}
  >
    {(args) => {
      return <inline-alert {...args}>The alert message</inline-alert>;
    }}
  </Story>
</Canvas>

如果修正后依然无法正常渲染内容投影，可以使用模板字符串结合动态属性绑定的方式，自动遍历args绑定所有属性，无需逐个显式声明：

<Canvas>
  <Story
    name="Primary"
    args={{
      severity: "error"
    }}
  >
    {(args) => ({
      template: `
        <inline-alert 
          ${Object.entries(args).map(([key]) => `[${key}]="${key}"`).join(' ')}
        >
          The alert message
        </inline-alert>
      `,
      props: { ...args }
    })}
  </Story>
</Canvas>

这个写法通过Object.entries遍历args的所有键，动态生成属性绑定语句，再展开到模板中，同时保留内容投影的写法，既满足Controls插件的参数控制，又无需手动逐个传递属性。

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