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

Posted 2023-02-19

【中文标题】如何将 storybook 集成到 antd angular(NG-ZORRO)

【英文标题】：How to integrate storybook to antd angular(NG-ZORRO)

【发布时间】：2020-07-22 08:58:03

【问题描述】：

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

【参考方案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。

希望这会有所帮助。