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图表动画插件Highcharts Examples
Apr 16 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
在JavaScript中使用timer示例
May 08 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
vue的路由映射问题及解决方案
Oct 14 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获取当前url路径的函数以及服务器变量
2013/06/29 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
react redux入门示例
2018/04/19 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
生日宴会答谢词
2014/01/09 职场文书
英语自我评价范文
2014/01/24 职场文书
奶茶店创业计划书
2014/08/14 职场文书
煤矿安全保证书
2015/02/27 职场文书
中学政教处工作总结
2015/08/13 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
java泛型通配符详解
2021/07/25 Java/Android