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

Question

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

Answer 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: {
    },
  };
};

Answer 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。

希望这可以帮助。