在角度模块中使用注入的故事书

Question

我想使用 Storybook 开发和测试我的 UI 组件，并将它们作为 npm 库从同一个项目中发布。这就是我将所有组件封装为单个功能模块的原因。我想创建一个简单的模块来生成一个表单并允许一些撤消功能。我的问题是 Storybook 无法将 Formbuilder 服务注入到我的组件中。

我的设置如下：

故事：

storiesOf('UndoForm', module)
  .addDecorator(
    moduleMetadata({
      imports: [ReactiveFormsModule, UndoFormModule]
    }),
  )
  .add('Testform', () => ({
    template: '<mods-undo-form></mods-undo-form>'
  })
);

UndoFormModule：

@NgModule({
  declarations: [UndoFormComponent],
  imports: [ReactiveFormsModule],
  exports: [UndoFormComponent]
})
export class UndoFormModule {}

UndoFormComponent：

@Component({
  selector: 'mods-undo-form',
  templateUrl: './undo-form.component.html',
  styleUrls: ['./undo-form.component.scss']
})
export class UndoFormComponent implements OnInit {
  [...]
  constructor(private fb: FormBuilder) { }
  [...]
}

我得到的错误是：

无法解析 UndoFormComponent 的所有参数：(?)。

我发现，当我明确使用 @Inject 注释时，代码就可以工作了：

constructor(@Inject(FormBuilder) private fb: FormBuilder) { }

有没有可能阻止显式注释的使用？

Answer 1

您需要在故事书装饰器的 moduleMetadata 的 providers 数组中提供“FormBuilder”。这样，您的故事书设置将识别出 FormBuilder 被用作组件中的可注入依赖项。

这是我在我们的一个故事中使用它的方式：

storiesOf('UndoForm', module)
  .addDecorator(
    moduleMetadata({
      imports: [ReactiveFormsModule, UndoFormModule],
      providers: [FormBuilder],
    }),
  )
  .add('Testform', () => ({
    template: '<mods-undo-form></mods-undo-form>'
  })
);

Answer 2

你需要在.storybook/tsconfig.json文件的compilerOptions对象中添加"emitDecoratorMetadata": true。

所以你的.storybook/tsconfig.json 应该是这样的：

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true,   <--------- Add this!
    ...
  },
  ...
}

然后确保重新启动您的故事书流程。

Answer 3

您可以将其直接导入故事中。像这样：

import { BannerV2Component } from './banner.v2.component';
import { moduleMetadata } from '@storybook/angular';


export default { 
  title: 'Banner',
  decorators: [
    moduleMetadata({
        imports: [ReactiveFormsModule, UndoFormModule],
        providers: [FormBuilder],
    })
  ]
}
export const OptionOne = () => ({
  component: BannerV2Component,
  props: {
    mainText:'Text Two',
    showBreadcrumbs:true,
  },
});