angular引入ng-zorr问题 关于angular引入ng-zorro的问题浅析

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

angular引入ng-zorr问题 关于angular引入ng-zorro的问题浅析

FisherKai   2021-03-16 我要评论
想了解关于angular引入ng-zorro的问题浅析的相关内容吗,FisherKai在本文为您仔细讲解angular引入ng-zorr问题的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:angular引入ng-zorr,下面大家一起来学习吧。

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就可正常使用了。

总结

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们