关于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 相关文章推荐
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
关于js类的定义
Jun 28 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
Node.js实现数据推送
Apr 14 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
js实现金山打字通小游戏
Jul 24 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批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
php正则表达式学习笔记
2015/11/13 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
详解Python map函数及Python map()函数的用法
2017/11/16 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
详解python的四种内置数据结构
2019/03/19 Python
详解Python:面向对象编程
2019/04/10 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Python 如何展开嵌套的序列
2020/08/01 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
岗位职责的构建方法
2014/02/01 职场文书
药学职务聘任书
2014/03/29 职场文书
教师考核评语
2014/04/28 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript