Json 如何在Angular app渲染中将对象作为故事书中的故事传递给@Input

我的组件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) { }
}

当我在故事书中设置这样的测试时，这一切似乎都起作用了

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

export const test1=（）=>({
…组件模块，
模板：“”
});

我想设置一个对象并传递它。但是，尝试执行以下操作不会呈现任何内容，就好像传递的实体为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 test2=（）=>({
…组件模块，
模板：“”
});
导出常量test3=（）=>({
…组件模块，
模板：“”
});
导出常量test4=（）=>({
…组件模块，
模板：“”
});
导出常量test5=（）=>({
…组件模块，
模板：“”
});
const config=新配置（“a1”，“驴子”，真）；
const configText=JSON.stringify（config）；

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

我最接近的就是这个。尽管如此，它仍然不允许我为标题输入字符串（引用被曲解了）。最后，这并不是真正的霸道。我想使用一个实际的对象并传递它

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

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

export const test5=（）=>({
…组件模块，
模板：“”
});
const configText=“{id:23，title:34，active:true}”；

试试这个：

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

模板：``

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

显然，StoryBook要求自己使用故事的配置对象中的特殊字段提供变量值。所以，对于我愚蠢的问题，最简单的解决方法就是添加配置作为道具，就像这样

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

export const useGodDamnProps=（）=>({
…组件模块，
模板：“”，
道具：{config}
});

举个例子，这可能会有所帮助：

//默认任务列表状态
导出常量默认值=（）=>({
组件：TaskListComponent，
模板：`
`,
道具：{
任务：defaultTasksData，
onPinTask:actionsData.onPinTask，
onArchiveTask:actionsData.onArchiveTask，
},
});

您是否对其进行了测试或只是猜测？我这样问是因为它看起来像一个普通的插值，而问题是没有渲染值。你可能想看一下你旁边的答案。那一个奏效了。美元符号的用途是什么？它与故事书有关吗？

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