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

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

你可以像这样通过 props 传递变量：

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'
    },
  }))