如何在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或未定义一样。它的正确语法是什么？

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);

我尝试过一堆变体，但都失败了，什么都没做。这是故事书中的限制吗？我怀疑应该归咎于我的无能，但我对此一无所知

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

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 }
});

Answer 2

试试这个：

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

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,
},
});