如何将故事书与antd angular相结合(NG-ZORRO)

Question

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

Answer 1

当您在项目中使用ng-zoro-antd时，我们会修改您的angular.json以导入样式文件：

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

因此，如果您想使用ng-zorro-antd，您应该导入.story.js文件中使用的组件的样式文件。如CCD_ 2。

希望这能有所帮助。

Answer 2

您需要将ngzorro模块添加到故事书的元数据模块中。以下是示例

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