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

在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图标库部分图标不能正常显示,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • ng-zorro-antd 入门初体验

    ng-zorro-antd 入门初体验

    Angular版本的 Ant Design 总算发布了,其名曰:ng-zorro-antd. 这人要是越期待,心就越着急.早在8月上旬我就开发好了 ng-zorro-vscode:一个在vscode下的snippets.因此,虽然那时未能探到源代码,但从官网的SDK中,就已经对 ng-zorro-antd 有一定全面性了解. 下面将基于我的理解,从宏观角度解析一下,或许能帮助你更好的去使用 ng-zorro-antd. 再次说一下,ng-zorro-antd 真的是非常有良心的作品. 一.安装

  • 浅谈ng-zorro使用心得

    前言 本周使用ng-zorro做了项目的原型,对它也有了一定的了解,总的来说不难,可以用强化版boostrap来理解它,由于黄庭祥初始化工作做得很好,在写的过程遇到的问题不是很麻烦,感谢祥哥. 问题一.button不起作用 问题描述:button按钮按下无响应,如下图: 代码如下: 解决思路: 首先删除button中所有的样式,保留最基本的html,发现依然无响应,说明问题不在button身上 排查栅格布局,发现table标签被我放在了button同一行新建了一个row,col放置table,问

  • 详解关于Angular4 ng-zorro使用过程中遇到的问题

    写在前面 由于现在网络上Angular 4的相关技术文档不是很充分,我写出这个采坑的记录文档,一方面是想给自己在项目中遇到的各种问题与个人的理解记录下来,另一方面也想着某些坑大家可能也会遇到,也可以给道友做一个参考.文档中的很多地方多有不足,后期我会慢慢完善,也希望道友们能够及时指出文档中不正确的与可以优化的地方. 我计划将该帮助文档分为4个章节: 章节一: 关于angular 4 + ng-zorro在基础布局与模块拆分上的一些问题与操作步骤 章节二: angular 4 引入路由=> 组件模

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

    在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-

  • Vue中使用ElementUI使用第三方图标库iconfont的示例

    1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中,然后点击更多项目中的编辑项目 2.修改前缀为el-icon-xxx,xxx自定义,然后将项目下载自本地 3.将这5个文件放入到项目文件中,将iconfont.css引入到Vue项目中, 然后修改iconfont.css的.iconfont处,将其修改为下图所示 4.修改iconfont.css后,大致如下图所示 5.最后就可以采用icon相同方式引入图标,如下图方式引用即可 注意:如果修改前缀为el-icon

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • 浅谈Angular中ngModel的$render

    浅谈Angular中ngModel的$render

    在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

  • 基于angular中的重要指令详解($eval,$parse和$compile)

    在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile.其实这两个服务讲的人已经很多了,但是100个读者就有100个哈姆雷特,我在这里讲讲自己对于他们两个服务的理解. 大家可能会疑问,$eval呢,其实他并不是一个服务,他是scope里面的一个方法,并不能算服务,而且它也基于parse的,所以只能算是$parse的另一种写法而已,我们看一下ng源码中$eval的定义是怎样的就知道了 $eval: fu

  • 在 Angular 中实现搜索关键字高亮示例

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数据展示在页面中. 但是,在有些情况下,比如我们有一个搜索框,希望将搜索的关键字在正文中高亮出来,这时候就会感觉比较吃力了,filter 可以帮助我们处理这种情况. 实际上,很多时候,我们的数据是不能直接输出到 DOM 中的,典型的比如日期,或者货币等等,通常需要将我们内部的数据格式化之后,再输出到页

  • 在 Angular 中使用Chart.js 和 ng2-charts的示例代码

    Chart.js是一个流行的JavaScript图表库,ng2图表是Angular 2+的包装器,可以轻松地将Chart.js集成到Angular中. 我们来看看基本用法. 安装 首先,在项目中安装 Chart.js 和 ng2-charts: # Yarn: $ yarn add ng2-charts chart.js # or npm $ npm install ng2-charts charts.js --save 当然 ,如果你是使用Angular CLI构建的项目,你也可以很容易的添加

  • Angular中封装fancyBox(图片预览)遇到问题小结

    首先在官网下载最新版的fancyBox(一定要去最新网站,以前依赖的jquery版本偏低),附上链接: http://fancyapps.com/fancybox/3/ 然后在项目中引用jquery,然后在引用jquery.fancybox.min.css和jquery.fancybox.min.js. 如果需要动画和鼠标滚轮滚动效果还可以引入他提供的相关工具文件. 1.你可以通过链接.css和.js在你的html文件来安装fancyBox .确保您也加载了jQuery库.以下是用作示例的基本H

  • Android实现一个包含表格的图标库实例代码

    Android实现一个包含表格的图标库实例代码

    之前有写过一个图表lib,但是开发的速度,大多很难跟上产品需求变化的脚步,所以修改了下原先的图表库,支持图表下面能整合table显示对应的类目,用曲线替换了折线,支持多曲线的显示,增加了显示的动画,,增加了一些可定制的属性,支持水平柱状图和叠加柱状图,以及多曲线图和饼状图的显示 1.效果图 2.各种图表的使用方式 1.饼状图 这个和原先的使用一样,只不过增加了一个动画,可以参看之前的文章,饼状图使用. 2.水平多柱状图 2.1 xml布局 <wellijohn.org.varchart.hor_

  • Angular中innerHTML标签的样式不起作用的原因解析

    1.背景 在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: //HTML部分 <div class="contents" [innerHTML]="contents"></div> //TS部分 contents = '<p>商品信息栏位<br><span style="color:red;">商品信息介绍</span></p&g

随机推荐