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

Question

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

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

而配置本身是一个类，如下所示。

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

我不太喜欢回答我自己的垃圾问题，但向我提供解决方案的同事是那些拒绝为该网站做出贡献的怪异水蛭之一（因为哦，哦，有一次我问了一个问题，人们很刻薄，因为它很糟糕我的自尊心受到了伤害……）。所以要澄清的是——我自己还没有弄清楚。奥斯卡做到了。这很容易。

显然，StoryBook 要求自己使用故事配置对象中的特殊字段来提供变量值。因此，解决我的愚蠢问题的简单方法是将config添加为props，如下所示。

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