有角故事书中的渲染组件

时间:2019-07-09 04:56:26

标签: angular storybook

选择某些选项后,我想在故事书中重新显示我的图表。有没有办法让故事书重新渲染我的组件并传递新的值。我希望能够从故事中的旋钮中选择值,单击一个按钮,然后它会重新显示。

这是我的组件输入

    @Input() title: string;
    @Input() chartType: string;
    @Input() toolTip: boolean;


   constructor() { }

    ngOnInit() {
        this.setUpChart(); // this creates the chart
    }

and my story



const handler = () => {
  forceReRender();
}
storiesOf('UI/Basic Chart', module)
  .addDecorator(
    moduleMetadata({
      imports: [UiModule]
    })
  )
  .addDecorator(withKnobs)
  .add(
    'basic',
    () => ({
      template:
        '<ic-basic-chart [title]="title" [chartType]="chartType" [toolTip] ="toolTip"></ic-basic-chart>',
      props:{
        title: text('Chart Title', 'Browser market shares. January, 2019'),
        chartType: select('Chart Type', {'Bar Chart': 'column', 'Line Chart': 'line'}, 'column'),
        toolTip: boolean('Tooltip', true),
        button: button('Update Chart', handler )
      }
    }),
    {
      notes: `
# Fancy Widget Notes

TODO:
`
    }
  );
``

0 个答案:

没有答案