选择某些选项后,我想在故事书中重新显示我的图表。有没有办法让故事书重新渲染我的组件并传递新的值。我希望能够从故事中的旋钮中选择值,单击一个按钮,然后它会重新显示。
这是我的组件输入
@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:
`
}
);
``