时间戳

首页 > 解决方案 > 如何将内容子传递给故事书中的组件以获取角度？

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

问题描述

我试图使用 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>。

如果您对此有任何想法，我将不胜感激，谢谢~

标签： angularstorybook

解决方案

我想出了一个解决方案来解决这个问题，通过添加另一个组件来表示具有内容子组件的组件，然后为这个附加组件编写一个故事。

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

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

推荐阅读