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面向对象(极简主义法minimalist approach)
Jul 17 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
一个可复用的vue分页组件
May 15 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
关于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 strtotime函数详解
2009/12/18 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
Python3里的super()和__class__使用介绍
2015/04/23 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
专业销售业务员求职信
2013/11/18 职场文书
开办饭店创业计划书
2013/12/28 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
图书室标语
2014/06/21 职场文书
小学教师党员承诺书
2015/04/27 职场文书
放假通知怎么写
2015/08/18 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript