如何将内容子级传递到故事书中的组件以获取角度？

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）