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

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

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

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

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

然后确保重新启动故事书过程。