如何在 Storybook 中使用 Angular 输入信号

Question

我正在尝试设置 Storybook 8.0.8 以与 Angular 17.3 一起使用。我在组件中使用 Angular

input()

信号，并且遇到了一个有趣的问题，其中故事书故事参数也希望参数类型是一个信号。我可以尝试在故事中获取可用的注入上下文，但这对我来说并不是“一种做事的好方法”。

我希望有一种干净、内联的方式来将我的参数提供为像以前一样的文字值。有人遇到过同样的问题并找到了不错的解决方案吗？

这是一个简单的角度组件和故事书故事，复制了我的问题

const meta: Meta<NoteComponent> = {
  title: 'Shared/Note',
  component: NoteComponent,
  tags: ['autodocs'],
  args: {
    maxChars: 200 // Error: Type 'number' is not assignable to type 'InputSignal<number>'.
  }
};

export default meta;
type Story = StoryObj<NoteComponent>;

export const Primary: Story = {
};

@Component({
  selector: 'app-note',
  template: 'A note with {{maxChars()}} maximum characters',
  standalone: true,
})
export class NoteComponent {
  maxChars = input<number>(300);
}

Answer 1

只需提供信号

import { signal } from '@angular/core';

const meta: Meta<NoteComponent> = {
  title: 'Shared/Note',
  component: NoteComponent,
  tags: ['autodocs'],
  args: {
    maxChars: signal(200) // changed here!
  }
};