Angular React Storybook附加旋钮用于编辑角度道具

我无法使用Angular 2+编辑故事书中使用旋钮的道具值。Knobs Github的readme.md有以下几行

Storybook插件旋钮允许您使用Storybook UI动态编辑React道具。您还可以将旋钮用作Storybook中故事内部的动态变量

这是否意味着至少在目前，这不可能与角度有关？我的代码在index.stories.ts中：

import { storiesOf } from '@storybook/angular';
import { boolean, number, text,  button, array, select, selectV2, color, 
object, withKnobs, withKnobsOptions} from '@storybook/addon-knobs/angular';

const stories = storiesOf('Storybook Knobs',module);
stories.addDecorator(withKnobs);  
stories.add('with knobs', () => ({ 
   props:{
        Name:text('Name', 'John'),
        age:number('Age',47)
        },
        template:`My name is ${Name}, I'm ${age} years old`          
       }) );

---

以前，我也尝试过使用组件而不是模板，但我无法更改如图所示和所示的道具的值。非常感谢您提供任何样本或文章的链接。

故事书回购中有一个完整的示例：

另外，您单独发布的代码没有提供太多上下文。如果你能创建一个git回购，那就太好了

这是我们存储库中的示例，请测试它，如果它不起作用，请毫不犹豫地创建一个问题

import { storiesOf } from '@storybook/angular';
import { action } from '@storybook/addon-actions';

import {
  withKnobs,
  text,
  number,
  boolean,
  array,
  select,
  color,
  date,
  button,
} from '@storybook/addon-knobs/angular';

import { SimpleKnobsComponent } from './knobs.component';
import { AllKnobsComponent } from './all-knobs.component';

storiesOf('Addon|Knobs', module)
  .addDecorator(withKnobs)
  .add('Simple', () => {
    const name = text('name', 'John Doe');
    const age = number('age', 0);
    const phoneNumber = text('phoneNumber', '555-55-55');

    return {
      moduleMetadata: {
        entryComponents: [SimpleKnobsComponent],
        declarations: [SimpleKnobsComponent],
      },
      template: `
        <h1> This is a template </h1>
        <storybook-simple-knobs-component
          [age]="age"
          [phoneNumber]="phoneNumber"
          [name]="name"
        >
        </storybook-simple-knobs-component>
      `,
      props: {
        name,
        age,
        phoneNumber,
      },
    };
  })
  .add('All knobs', () => {
    const name = text('name', 'Jane');
    const stock = number('stock', 20, {
      range: true,
      min: 0,
      max: 30,
      step: 5,
    });
    const fruits = {
      apples: 'Apple',
      bananas: 'Banana',
      cherries: 'Cherry',
    };
    const fruit = select('fruit', fruits, 'apple');
    const price = number('price', 2.25);

    const border = color('border', 'deeppink');
    const today = date('today', new Date('Jan 20 2017'));
    const items = array('items', ['Laptop', 'Book', 'Whiskey']);
    const nice = boolean('nice', true);
    button('Arbitrary action', action('You clicked it!'));

    return {
      component: AllKnobsComponent,
      props: {
        name,
        stock,
        fruit,
        price,
        border,
        today,
        items,
        nice,
      },
    };
  });

---

这个演示应该出现在Angular页面故事书的演示部分，或者至少是附加的“旋钮”部分，因为上面的示例没有显示如何将旋钮与自定义组件一起使用。感谢AlterXYeah，一般来说，我们建议查看每个框架的示例文件夹。我们试图保留其中大多数功能的示例：请注意，当前存在一个开放的bug，如果您也在使用附加操作，旋钮date将抛出一个错误。看见如果要使用日期旋钮，解决方法是不使用附加操作