如何在 Storybook 中导入 NgbCalendar？

Question

我构建了 Angular 使用 ngbDatepicker 的组件。组件（名为 DatepickerComponent）导入以下类:

import { NgbDateStruct, NgbCalendar, NgbDatepickerI18n, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';

我想通过创建story来展示Storybook中的组件datepicker.stories.ts:

import { withPreview, previewTemplate, DEFAULT_ANGULAR_CODESANDBOX } from 'storybook-addon-preview';
import { moduleMetadata } from '@storybook/angular';
import { DatepickerComponent } from 'src/app/datepicker/datepicker.component';
import { NgbModule, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';

export default {
  title: 'Datepicker',
  decorators: [
    moduleMetadata({
      declarations: [DatepickerComponent],
      imports: [NgbModule, NgbCalendar]
    }),
    withPreview
  ]
};

export const Datepicker = () => ({
  component: DatepickerComponent
});
Datepicker.story = { name: 'Datepicker' };

当我运行故事书时，我收到此错误消息：

Unexpected value 'NgbCalendar' imported by the module 'DynamicModule'. Please add a @NgModule annotation.

如何正确导入NgbCalendar？

Answer 1

@Component 中定义的相同提供商也必须在 moduleMetadata 故事中：

export default {
  title: 'Datepicker',
  decorators: [
    moduleMetadata({
      declarations: [
        DatepickerComponent
      ],
      imports: [NgbModule],
      providers: [
        I18n,
        { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
        { provide: NgbDateParserFormatter, useClass: CustomNgbDateParserFormatter }
      ]
    })
  ]
};

如何在 Storybook 中导入 NgbCalendar？

How to import NgbCalendar in Storybook?

angular

ng-bootstrap

storybook