Как передать объект в @Input в приложении Angular для рендеринга в виде истории в StoryBook - PullRequest
Новая
       7

Как передать объект в @Input в приложении Angular для рендеринга в виде истории в StoryBook

0 голосов
/ 17 марта 2020

Мой компонент 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}";

Ответы [ 2 ]

0 голосов
/ 17 марта 2020

Не большой поклонник ответа на мой собственный мусор, но коллега, который подарил мне решение, является одной из тех чудаков-пиявок, которые отказываются внести свой вклад в сайт (потому что о-о-о, как только я задал вопрос и люди были подлыми, потому что это отстой, и я получил боль go ... ). Так что просто для ясности - я сам не понял. Оскар сделал. И это было легко.

Судя по всему, StoryBook требует предоставить значения переменных, используя специальное поле в объекте конфигурации истории. Итак, самое простое решение моей идиотской проблемы - добавить config как props , вот так. 

export const useGodDamnProps = () => ({
  ...componentModule,
  template: "<plopp [config]='config'></plopp>",
  props: { config }
});
0 голосов
/ 17 марта 2020

Попробуйте это: 

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