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


Posted in Javascript onSeptember 09, 2020

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问题内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
关于vue的列表图片选中打钩操作
Sep 09 #Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 #Javascript
js实现简单抽奖功能
Nov 24 #Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 #Javascript
Vue路由 重定向和别名的区别说明
Sep 09 #Javascript
JavaScript常用8种数组去重代码实例
Sep 09 #Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 #Javascript
You might like
PHP重定向的3种方式
2013/03/07 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
PHP _construct()函数讲解
2019/02/03 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
js选项卡的制作方法
2017/01/23 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
python实现在windows下操作word的方法
2015/04/28 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
详解Python 正则表达式模块
2018/11/05 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
python mysql中in参数化说明
2020/06/05 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
C++程序员求职信范文
2014/04/14 职场文书
家长给学校的建议书
2014/05/15 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
重阳节慰问信
2015/02/15 职场文书
导游词之无锡古运河
2019/11/14 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers