web-dev-qa-db-ja.com

angularモジュールでインジェクションを使用したスト​​ーリーブック

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

明示的な注釈の使用を妨げる可能性はありますか？

angularstorybook
4
Georg Leber

ストーリーに直接インポートできます。そのようです：

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,
  },
});
0
Eliezer Berlin

ストーリーブックデコレータのmoduleMetadataのプロバイダ配列に「FormBuilder」を提供する必要があります。このようにして、ストーリーブックのセットアップは、FormBuilderがコンポーネントの注入可能な依存関係として使用されていることを認識します。

これが私が私たちの物語の1つでそれをどのように使用しているかです。

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