如何控制Angular Storybook v6.5.15仅在Controls中显示INPUTS？

针对你的需求，有两种方式可以实现Controls面板只展示@Input标记的属性，隐藏PROPERTIES、METHODS、OUTPUTS：

一、单个故事配置（仅对当前组件生效） #

在组件对应的.stories.ts文件中，通过parameters.controls.include指定只展示需要的@Input属性：

import { MyComponent } from './my.component';

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
  parameters: {
    controls: {
      // 只列出你需要展示的@Input属性名
      include: ['data', 'isEditable']
    }
  }
};

export const Default = {};

如果需要排除的属性更多，也可以用正则匹配排除非目标属性：

controls: {
  exclude: /^(?!data|isEditable).*/
}

二、全局配置（所有组件故事生效） #

如果希望所有Angular组件的Storybook都只显示@Input属性，修改.storybook/preview.js文件，通过筛选argTypes的类型来实现：

export const parameters = {
  controls: {
    include: (args, argTypes) => {
      // 只保留type为'input'的属性（对应@Input装饰器标记的变量）
      return Object.fromEntries(
        Object.entries(argTypes).filter(([_, argType]) => argType.type.name === 'input')
      );
    }
  }
};

原理说明 #

在Storybook 6.5的Angular集成中，@Input标记的属性会被归类为type.name = 'input'，而普通公共属性是type.name = 'property'，METHODS和OUTPUTS也有对应的类型标识，通过上述筛选逻辑就能精准只保留INPUTS面板。

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