Как интегрировать сборник рассказов в antd angular(NG-ZORRO)

Question

Я пытаюсь интегрировать сборник рассказов в свой проект angular, который использует и разрабатывает библиотеку. Storyboook работает нормально, но стиль antd не загружается в рассказах. Он показывает только элементы по умолчанию. Я погуглил много возможностей, мало о и в angular. Я знаю, что мы как-то завернули истории в библиотеку antd. Пожалуйста, покажи мне дорогу. Если у нас уже есть пример, это будет здорово. Заранее спасибо.

Answer 1

Когда вы используете ng-zorro-antd в своих проектах, мы изменим ваш angular.json для импорта файла стилей:

{
            "styles": [
              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
              "src/styles.css"
            ],
}

Поэтому, если вы хотите использовать ng-zorro-antd, вам следует импортировать файлы стилей компонентов, которые вы использовали в .story.jsфайлы. Такие какnode_modules/ng-zorro-antd/src/components/select/style/entry.less.

Надеюсь это поможет.

Answer 2

вам нужно добавить модуль ngzorro в metadataModule сборника рассказов. Вот пример

      export const MyComponentImpl = () => {
  return {
    moduleMetadata: {
      declarations: [MyComponent],
      imports: [
         BrowserModule,
         FormsModule,
         ReactiveFormsModule,
         BrowserAnimationsModule,
         NgZorroModule // the ngzorro modules that you want to use
     ]
    },
    template: `
        <div [ngStyle]="{'width': '100vw'}">

          <my-component></my-component>

        </div>
      `,
    props: {
    },
  };
};