Nrwl for Angular 生成的stories如何添加可复制的代码片段

1. 官方原生源码展示方案（无需额外依赖） #

Nrwl 生成的 Angular Storybook 默认已经支持自动生成组件调用源码，你只需要在 story 配置里开启 docs 的源码展示能力即可：

• 在单个 story 的 meta 配置里添加如下参数：

export default {
  title: '组件/Button',
  component: ButtonComponent,
  parameters: {
    docs: {
      source: {
        type: 'dynamic', // 会自动跟随args变动生成对应代码
        state: 'open', // 默认展开源码块
      },
      // 开启一键复制按钮
      copyCode: {
        enable: true
      }
    }
  }
} as Meta<ButtonComponent>;

• 配置完成后，Storybook 文档页会自动生成和当前入参绑定的组件调用代码，支持开发者一键复制。

2. 自定义代码片段实现方案 #

如果你需要展示固定的使用示例代码（比如模块引入、服务调用等非组件调用代码），可以用两种方式实现：

方案A：使用 Storybook Docs 内置的 Code 组件 #

这是 Storybook 官方 @storybook/blocks 包自带的组件，直接导入即可使用：

// 先安装依赖（如果没装的话）
// npm install @storybook/blocks --save-dev

// 在story的docs配置里使用
import { Code } from '@storybook/blocks';

parameters: {
  docs: {
    description: {
      component: `
### 基础使用
<Code language="typescript">
{\`
// 模块引入
import { ButtonModule } from 'your-lib/button';

@NgModule({
  imports: [ButtonModule]
})
export class AppModule {}
\`}
</Code>

<Code language="html">
{\`
<app-button [type]="'primary'" [disabled]="false">按钮</app-button>
\`}
</Code>
      `
    }
  }
}

方案B： 组件来源 #

你参考示例里的 <CodeSnippets> 是 Storybook 官方旧版 @storybook/addon-docs 包内置的组件，7.x 之后的新版 Storybook 已经统一替换为上面提到的 Code 组件，功能完全一致，支持指定代码语言、一键复制、多标签多片段切换等能力。

3. Nrwl 自动生成模板全局配置 #

如果你希望所有 Nrwl 自动生成的 stories 默认都带代码片段能力，可以修改全局配置避免重复操作：

• 找到项目中 libs/your-lib/.storybook/preview.ts 文件，全局配置源码展示参数：

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

const preview: Preview = {
  parameters: {
    docs: {
      source: {
        type: 'dynamic',
        state: 'open',
      },
      copyCode: { enable: true }
    }
  }
};

export default preview;

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