Question

我有一个使用<ng-content>的简单角度分量。我试图将其放在故事书中，但是我无法弄清楚使用变量指定内容的语法。这是我现在拥有的：

import {Header1Component} from './header1.component';
import {moduleMetadata, storiesOf} from '@storybook/angular';

const stories = storiesOf('Header 1', module)
    .addDecorator(
        moduleMetadata({
            declarations: [Header1Component],
        })
    );

stories.add('standard', () => {
    return {
        template:  `<app-header1>This is header 1</app-header1>`,
    };
});

这可以正常工作，但是我真正想做的是将内容绑定到变量，如下所示：

stories.add('standard', () => {
    const myValue = 'This is a header';
    return {
        template:  `<app-header1>{myValue}</app-header1>`,
    };
});

遗憾的是，这不起作用。当我尝试时，内容为空。正确的语法是什么？

Answer 1

您可以像这样通过道具传递变量：

storiesOf('Button', module)
  .addDecorator(
    moduleMetadata({
        declarations: [ButtonComponent],
        imports: [BrowserModule, RouterTestingModule, CommonModule, MatButtonModule],
    }),
  )
  .add('SimpleButton', () => ({
    template: `<app-button [color]="color">{{content}}</app-button>`,
    props: {
        content: 'Click me',
        color: 'primary'
    },
  }))

如何设置故事书中Angular组件的ng-content？

1 个答案: