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

您应该向组件添加@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'
    }
    })
);

有关更多信息，请检查此introduction storybook for Angular

Answer 2

我想出一个解决方案，通过添加另一个将用内容子代表示该组件的组件，然后为这个附加组件编写一个故事。

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

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

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

2 个答案: