Angular 2+下Storybook Knobs无法编辑Props？是否暂不支持？

别被Knobs README里那段偏向React的描述误导啦！Knobs插件是完全支持Angular的，只是文档没有及时更新覆盖所有框架场景而已。你遇到的无法编辑Props的问题，大概率是配置或代码写法有遗漏，下面给你梳理几个排查和解决的关键点：

1. 先确认Knobs的依赖与配置是否到位 #

首先要确保你已经完成了Knobs的基础安装和注册：

• 安装依赖：执行 npm install @storybook/addon-knobs --save-dev
• 在.storybook/main.js（或.ts）的addons数组中添加Knobs插件：

  module.exports = {
    // ...其他配置
    addons: [
      // ...其他addons
      '@storybook/addon-knobs'
    ]
  };
  

2. 检查你的Story代码是否正确启用了Knobs #

这是最容易忽略的一步：你必须在Story组中添加withKnobs装饰器，Knobs才能生效。正确的Angular Story写法示例如下：

import { storiesOf } from '@storybook/angular';
import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
import { YourTargetComponent } from './path-to-your-component';

storiesOf('YourComponent', module)
  .addDecorator(withKnobs) // 关键：添加这个装饰器启用Knobs
  .add('default', () => ({
    component: YourTargetComponent,
    props: {
      // 将组件的@Input()属性与Knobs绑定
      isVisible: boolean('Is Visible', false),
      headerText: text('Header Text', 'Default Header'),
      itemCount: number('Item Count', 10)
    }
  }));

如果你的代码里没加addDecorator(withKnobs)，Knobs面板是不会对这个Story生效的。

3. 注意Storybook版本的兼容性 #

如果你的Storybook是7.x及以上版本，要特别注意：Knobs插件已经被官方弃用了，官方推荐使用内置的Controls插件替代。Controls不需要额外安装，只要你的组件定义了@Input()属性，Storybook会自动生成对应的控制面板，用法比Knobs更简洁集成。

如果是这种情况，建议直接切换到Controls，而不是继续折腾Knobs啦。

内容的提问来源于stack exchange，提问作者curious.netter