在故事书中设置组件参数

时间:2020-08-26 13:22:13

标签: javascript angular storybook angular-storybook

我已经创建了一个简单的有角度的故事,但是故事参数没有显示在组件中。 故事:

export const myStory = (args: FileExplorerComponent) => ({
    component: FileExplorerComponent,
      template: `
        <div style="position: relative">
        <common-file-explorer></common-file-explorer>
            <p>Przykładowe użycie Webdav</p>
        </div>
        `,
         directory: 'bip',
         parameters: {
        directory: 'bip',
      },
      props: {
        directory: 'bip',
      menuItems: [
  { directory: 'bip' }
],
}

组件:

 @Input() directory: string;

构造函数:

console.log('directory', this.directory);

显示未定义。我必须设置提供程序或构造函数参数吗?

1 个答案:

答案 0 :(得分:1)

在您的示例中,应该不是:

 template: `
<div style="position: relative">
   <common-file-explorer [directory]="this.directory" ></common-file-explorer>
   <p>Przykładowe użycie Webdav</p>
</div>
`,

? 或者可能

 template: `
<div style="position: relative">
   <common-file-explorer [directory]="this.menuItems[0].directory" ></common-file-explorer>
   <p>Przykładowe użycie Webdav</p>
</div>
`,