在故事书组件模板上使用属性答案

【问题标题】：Use properties on storybook component template在故事书组件模板上使用属性
【发布时间】：2021-03-14 13:15:49
【问题描述】：

在故事中使用类组件使您能够将属性作为参数传递：

const Template: Story<MyComponent> = (args) => ({
  props: args,
  component: MyComponent,
})

export const Default = Template.bind({});

export const Small = Template.bind({});
Small.args = {
  size: 'xs'
}

神奇地，参数被映射为组件的道具。但是，当使用模板时它不起作用：

const Template: Story<FlexDialogModalComponent> = (args) => ({
  props: args,
  template: `
    <app-my-component>test</app-my-component>
  `,
})

现在看起来很明显，因为它不知道在哪里添加它们。所以我认为以下应该是可能的：

const Template: Story<FlexDialogModalComponent> = (args: { dialogModalSize }) => ({
  props: args,
  template: `
    <app-my-component [size]="size">test</app-my-component>
  `,
})

但这不起作用。它没有给出错误，但它什么也不做。有人知道如何解决这个问题吗？

【问题讨论】：

标签： angular storybook angular-storybook

【解决方案1】：

以下是一些我认为可以帮助您解决问题的示例。

// my-component.ts
import {
  Component,
  Input
} from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html'
})
export class MyComponent {
  @Input() size: string;
}

<!--my-component.html-->
{{size}}

// my-component.stories.ts
import { CommonModule } from '@angular/common';
import { moduleMetadata } from '@storybook/angular';
import { MyComponent } from './my-component';

export default {
  title: 'MyComponent',
  decorators: [
    moduleMetadata({
      imports: [
        CommonModule,
      ], declarations: [
        MyComponent
      ]
    })
  ]
};

export const Component = () => ({
  component: MyComponent,
  props: {
    size: 'xs'
  }
})

// "@storybook/addon-controls" is needed (.storybook/main.js) so that you can play with the 'size' property in Storybook in the 'Controls' tab
export const Template = (args) => ({
  template: `<app-my-component [size]="size"></app-my-component>`,
  props: args
})
Template.args = {
  size: 'xs'
}

// "@storybook/addon-controls" is needed (.storybook/main.js) so that you can play with the 'size' property in Storybook in the 'Controls' tab
export const ComponentWithControls = (args) => ({
  component: MyComponent,
  props: args
})
ComponentWithControls.args = {
  size: 'm'
}

【讨论】：