如何将 storybook 集成到 antd angular(NG-ZORRO)答案

【问题标题】：How to integrate storybook to antd angular(NG-ZORRO)如何将 storybook 集成到 antd angular(NG-ZORRO)
【发布时间】：2020-07-22 08:58:03
【问题描述】：

我正在尝试将故事书集成到我使用和设计库的 Angular 项目中。 Storybook 运行良好，但 antd 样式没有加载到故事中。它仅显示默认元素。我用谷歌搜索了很多可能性，几乎没有关于和角度的。我知道我们以某种方式用 antd 库包装了这些故事。请给我指路。如果我们已经有一个例子，那就太好了。提前致谢。

【问题讨论】：

标签： angular storybook ng-zorro-antd angular-storybook

【解决方案1】：

您需要将 ngzorro 模块添加到 storybook 的 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: {
    },
  };
};

【讨论】：

【解决方案2】：

当您在项目中使用 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。

希望这会有所帮助。

【讨论】：