如何在Storybook UI中显示Angular组件的代码片段？

要在Storybook UI里看到<foo />这类组件的使用代码片段，按以下方法处理：

1. 确认Docs插件已启用 #

你的main.ts里已经包含@storybook/addon-essentials，这个插件默认集成了@storybook/addon-docs——这是显示代码片段的核心插件，不用额外安装，只需确保配置没问题。

2. 配置单个Story的Meta信息 #

修改FooComponent的Story文件，在meta配置中添加docs字段，指定代码展示规则：

const meta: Meta<FooComponent> = {
  component: FooComponent,
  title: 'FooComponent',
  docs: {
    source: {
      type: 'code', // 强制生成并显示组件使用代码
      language: 'html', // 指定代码语言为HTML
    },
  },
};

export default meta;
type Story = StoryObj<FooComponent>;

export const Primary: Story = {
  args: { /* 你的组件参数 */ },
};

3. 全局配置（可选） #

如果想让所有Story默认显示代码片段，在.storybook/preview.ts里添加全局参数：

import type { Preview } from '@storybook/angular';

const preview: Preview = {
  parameters: {
    docs: {
      source: {
        type: 'code',
      },
    },
  },
};

export default preview;

4. 版本兼容性检查 #

确保Storybook版本和你的Angular版本匹配，部分旧版本可能存在代码展示的兼容问题，建议升级到对应Angular版本的最新稳定Storybook版本。

做完以上配置后，重启Storybook服务，就能在对应Story的Docs标签页里看到生成的<foo />组件使用代码了。

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