Как передать содержимое 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> ?

Я хочу написать историю для компонента, который с содержанием ребенка <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