如何浅析在Angular项目中引入ng-zorro框架的要点与挑战？

本文共计350个文字，预计阅读时间需要2分钟。

在ng-zorro官网，提供了两种在项目中添加ng-zorro的方法，以下是第二种方法：

第一步：执行以下命令创建新的Angular项目，若未安装angular/cli，请先执行安装命令。ng new new-proj如果项目中已经存在ng-zorro的依赖，可以直接使用以下命令添加ng-zorro：ng add ng-zorro-antd执行完毕后，ng-zorro的相关组件和指令将自动添加到项目中。

ng-zorro的官网上提供了两种在项目中添加ng-zorro的方法，下面记录其提供的第二种自行构建的方式。

第一步：执行该命令创建新的angular项目，若没安装angular/cli请执行安装

ng new new-project

第二步：添加ng-zorro

npm install ng-zorro-antd --save

第三步：引入模块

在app.module.ts文件中引入

import { NgZorroAntdModule } from 'ng-zorro-antd';

...... imports: [ BrowserModule, FormsModule, HttpClientModule, BrowserAnimationsModule, /** 导入 ng-zorro-antd 模块 **/ NgZorroAntdModule ] ......

第四步：在 angular.json 文件中引入样式

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

第五步：在入口style.css或者style.less文件下引入组件样式

@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */ @import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */

或

@import "~ng-zorro-antd/style/entry.less"; /* 引入基本样式 */ @import "~ng-zorro-antd/button/style/entry.less"; /* 引入组件样式 */

然后在所需要的组件中使用ng-zorro就可正常使用了。

总结

到此这篇关于关于angular引入ng-zorro的问题的文章就介绍到这了,更多相关angular引入ng-zorr问题内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！