我想使用Storybook来开发和测试我的UI组件,并将它们作为npm库从同一项目中发布。这就是为什么我将所有组件封装为单个功能模块的原因。我想创建一个简单的模块,该模块生成一个表单并允许某些撤消功能。我的问题是Storybook无法将Formbuilder服务注入到我的组件中。
我的设置如下:
故事:
storiesOf('UndoForm', module) .addDecorator( moduleMetadata({ imports: [ReactiveFormsModule, UndoFormModule] }), ) .add('Testform', () => ({ template: '' }) );
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) { }
有没有可能防止使用显式注释?
您需要添加"emitDecoratorMetadata": true
的compilerOptions
对象.storybook/tsconfig.json
文件。
所以你.storybook/tsconfig.json
应该像这样:
{ "extends": "../tsconfig.app.json", "compilerOptions": { "emitDecoratorMetadata": true, <--------- Add this! ... }, ... }
然后确保重新启动故事书过程。