Как передать содержимое child компоненту в storybook для angular?

Question

Я пытался написать один сборник рассказов, используя angular, но я застрял здесь, я не знаю, как смонтировать компонент с дочерним содержимым.

Вот простой компонент, который я планирую написать для него сборник рассказов:

@Component({
    selector: 'foo',
    template: `
         <span>bar</span>
         <ng-content></ng-content>`
})
export class FooComponent {
    constructor(){}
}

Код сборника рассказов:

storiesOf('Foo', module).add('Default', () => ({
        component: FooComponent
    })
);

А приведенная выше история для компонента выглядит так: <foo></foo>

Но как я могу написать историю, чтобы компонент выглядел так: <foo><span>content child</span></foo>?

Я хочу написать историю для компонента с содержимым child <span>content child</span>.

Буду очень признателен, если у вас есть идеи по этому поводу, спасибо ~

Answer 1

Я нашел одно решение для обхода этой проблемы, добавив еще один компонент, который будет представлять компонент с потомком контента, а затем напишу историю для этого дополнительного компонента.

@Component{
  selector: 'foo-with-child',
  template: `<foo>content child</foo>`
class FooComponentWithChild {}

storiesOf('Foo', module).add('with Content Child', () => ({
        component: FooComponentWithChild
    })
);

Answer 2

Вы должны добавить атрибут @Input() content к компоненту:

@Component({
    selector: 'foo',
    template: '<span>{{content}}</span>'
})
export class FooComponent {
    @Input('content') content
    constructor(){}
}

и установите реквизит так:

storiesOf('Foo', module).add('Default', () => ({
    component: FooComponent
    props: {
      content: 'Content child'
    }
    })
);

Для получения дополнительной информации, ознакомьтесь с этим вступительным сборником рассказов для Angular