Angular中使用ng-zorro图标库部分图标不能正常显示问题


Posted in Javascript onApril 22, 2019

在ng-alain中,使用ng-zorro图标库,发现部分能正常显示,部分并不能显示,在控制台同时发现出错报错。

ERROR Error: [@ant-design/icons-angular]: the icon redo-o does not exist or is not registered.
at IconNotFoundError (ant-design-icons-angular.js:159)
at MapSubscriber.project (ant-design-icons-angular.js:343)
...

出现以上问题是没有对相对的图标进行导入,并导出。

ng-alain默认只导入了图标库的几十个图标,在 style-icons-auto.ts可进行查看。

因此可以参考style-icons-auto.ts,把你所需要的图标进行import and export

ng-zorro图标库:https://ng.ant.design/compone...

PS:下面看下ng-zorro等组件默认样式的修改

在项目中修改ng-zorro组件默认样式的一些方法:

  • 类名等 前加::ng-deep;
  • 类名等 前加:root;
  • 类名等 前加:host /deep/;
::ng-deep .ant-spin-dot i {
 background-color: #4c7bff;
}
:host ::ng-deep .ant-spin-dot i {
 background-color: #4c7bff;
}
:root .ant-select-dropdown {
 background-color: #1F273E;
 font-size: 14px;
 margin-top: 16px;
}
:host /deep/ .ant-spin-dot i {
 background-color: #4c7bff;
}

注意:上面三种方法可分别尝试一下,不同情况下其中之一会生效。

截止目前最新的7.0.0-rc.0 版本

table组件tbody中的td中的内容超出时默认会换行,想要实现xxxx...的效果需要一个hack:

::ng-deep .ant-table-tbody > tr > td {
 max-width: 0;
 white-space: nowrap;
}

总结

以上所述是小编给大家介绍的Angular中使用ng-zorro图标库部分图标不能正常显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
JS闭包经典实例详解
Dec 20 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 #Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 #Javascript
详解Vue中使用Axios拦截器
Apr 22 #Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 #Javascript
vue 项目build错误异常的解决方法
Apr 22 #Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 #Javascript
今天,小程序正式支持 SVG
Apr 20 #Javascript
You might like
php 中文和编码判断代码
2010/05/16 PHP
php发送post请求的三种方法
2014/02/11 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python连接MySQL数据库实例分析
2015/05/12 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
《画杨桃》教学反思
2014/04/13 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
个人违纪检讨书
2014/09/15 职场文书
确保工程质量承诺书
2015/04/29 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
中学生运动会广播稿
2015/08/19 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
详解Python requests模块
2021/06/21 Python
vue router 动态路由清除方式
2022/05/25 Vue.js