如何在 Angular 应用程序渲染中将对象作为 StoryBook 中的故事传递给 @Input

Question

我的组件 blopp 具有以下结构。

@Component({ selector: 'blopp', template: '{{config|json}}', ... })
export class BloppComponent {
  @Input() config: Config; ...    
}

虽然配置本身是如下所示的 class。

export class Config {
  constructor(public id: string, public title: string, public active: boolean) { }
}

当我像这样在 StoryBook 中设置测试时，一切似乎都有效。

export const test1 = () => ({
  ...componentModule,
  template: '<plopp [config]="{id:23,title:22,active:true}"></plopp>'
});

我想设置一个对象并传递它。但是，尝试执行以下操作不会呈现任何内容，就好像传递的实体是 null 或 undefined 一样。它的正确语法是什么？

export const test2 = () => ({
  ...componentModule,
  template: '<plopp [config]=config></plopp>'
});

export const test3 = () => ({
  ...componentModule,
  template: '<plopp [config]="config"></plopp>'
});

export const test4 = () => ({
  ...componentModule,
  template: '<plopp [config]=configText></plopp>'
});

export const test5 = () => ({
  ...componentModule,
  template: '<plopp [config]="configText"></plopp>'
});

const config = new Config("a1", "donkey", true);
const configText = JSON.stringify(config);

我尝试了很多变体，但都失败了，没有任何渲染。这是 StoryBook 的限制吗？我怀疑应该归咎于我的无能，但我不知道如何处理它。

我得到的最接近的是这个。不过，它仍然不允许我输入 title 的字符串（引文被误解了）。最后，这并不是真正的专横。我想使用一个实际的对象并传入它。

export const test5 = () => ({
  ...componentModule,
  template: '<plopp [config]=' + configText + '></plopp>'
});

const configText = "{id:23,title:34,active:true}";

Answer 1

试试这个：

template: `<plopp [config]="${configText}"></plopp>`

Answer 2

不太喜欢回答我自己的垃圾问题，但向我提供解决方案的同事是那些拒绝为网站做贡献的怪人水蛭之一（因为 哦，哦，一旦我问一个问题，人们都很刻薄，因为它很糟糕，我的自尊心受到了伤害……)。所以要明确一点-我自己还没有弄清楚。奥斯卡做到了。而且很简单。

显然，StoryBook需要自己在故事的配置对象中使用一个特殊的字段来提供变量值。因此，解决我的愚蠢问题的简单方法是将 config 添加为 props，就像这样。

export const useGodDamnProps = () => ({
  ...componentModule,
  template: "<plopp [config]='config'></plopp>",
  props: { config }
});

Answer 3

举个例子：https://storybook.js.org/tutorials/intro-to-storybook/angular/en/composite-component/

    // default TaskList state
export const Default = () => ({
  component: TaskListComponent,
  template: `
  <div style="padding: 3rem">
    <app-task-list [tasks]="tasks" (onPinTask)="onPinTask($event)" (onArchiveTask)="onArchiveTask($event)"></app-task-list>
  </div>
`,
  props: {
    tasks: defaultTasksData,
    onPinTask: actionsData.onPinTask,
    onArchiveTask: actionsData.onArchiveTask,
  },
});

如何在 Angular 应用程序渲染中将对象作为 StoryBook 中的故事传递给 @Input

How do I pass an object to @Input in Angular app rendering as a story in StoryBook

json

typescript

angular

storybook