代码之家  ›  专栏  ›  技术社区  ›  Xerner

如何在Storybook中使用角度输入信号

  •  0
  • Xerner  · 技术社区  · 1 年前

    我正在尝试将Storybook 8.0.8设置为使用angular 17.3。我正在使用Angular input() 组件中的信号,我遇到了一个有趣的问题,故事书中的故事args也希望参数类型是一个信号。我可以尝试在故事中提供注射上下文,但这对我来说并不是“一个好的做事方式”。

    我希望有一种干净的、内联的方式来提供我的args作为它们过去的文字值。有人遇到过同样的问题并找到了一个像样的解决方案吗?

    这里有一个简单的角度组成部分和故事书故事,复制了我的问题

    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);
    }
    

    提醒使用任何 signal() 创建函数期望注入上下文在作用域中。使命感 信号 在没有注入上下文的情况下生成

    NG0203: inputFunction() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext

    0 回复  |  直到 1 年前
        1
  •  0
  •   Naren Murali    1 年前

    只需提供一个信号

    import { signal } from '@angular/core';
    
    const meta: Meta<NoteComponent> = {
      title: 'Shared/Note',
      component: NoteComponent,
      tags: ['autodocs'],
      args: {
        maxChars: signal(200) // changed here!
      }
    };
    
        2
  •  0
  •   Xerner    1 年前

    我已经为自己的问题找到了解决办法。Storybook只是使用组件的类定义作为stories参数的预期类型,但它似乎没有将值直接绑定到组件的实例。通过使用以下方法处理TypeScripts类型系统,它变得可编译,Storybook可以很好地渲染组件。

    const meta: Meta<NoteComponent> = {
      title: 'Shared/Note',
      component: NoteComponent,
      tags: ['autodocs'],
      args: {
        maxChars: 200 as unknown as InputSignal<number>
      }
    };
    

    在我看来,这仍然很恶心,但它有效