Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問(wèn)題
在ng-alain中，使用ng-zorro圖標(biāo)庫(kù)，發(fā)現(xiàn)部分能正常顯示，部分并不能顯示，在控制臺(tái)同時(shí)發(fā)現(xiàn)出錯(cuò)報(bào)錯(cuò)。
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)
...
出現(xiàn)以上問(wèn)題是沒(méi)有對(duì)相對(duì)的圖標(biāo)進(jìn)行導(dǎo)入，并導(dǎo)出。
ng-alain默認(rèn)只導(dǎo)入了圖標(biāo)庫(kù)的幾十個(gè)圖標(biāo)，在 style-icons-auto.ts可進(jìn)行查看。
因此可以參考style-icons-auto.ts，把你所需要的圖標(biāo)進(jìn)行import and export
ng-zorro圖標(biāo)庫(kù)：https://ng.ant.design/compone...
PS:下面看下ng-zorro等組件默認(rèn)樣式的修改
在項(xiàng)目中修改ng-zorro組件默認(rèn)樣式的一些方法：
- 類名等 前加::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;
}
注意：上面三種方法可分別嘗試一下，不同情況下其中之一會(huì)生效。
截止目前最新的7.0.0-rc.0 版本
table組件tbody中的td中的內(nèi)容超出時(shí)默認(rèn)會(huì)換行，想要實(shí)現(xiàn)xxxx...的效果需要一個(gè)hack：
::ng-deep .ant-table-tbody > tr > td {
max-width: 0;
white-space: nowrap;
}
總結(jié)
以上所述是小編給大家介紹的Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
AngularJS 模型詳細(xì)介紹及實(shí)例代碼
本文主要介紹 AngularJS模型，這里詳細(xì)介紹了AngularJS 模型中的知識(shí)點(diǎn),并提供實(shí)例代碼,有需要的小伙伴可以參考下2016-07-07
上傳文件在很多時(shí)候都能用到，這篇文章主要介紹了AngularJS上傳文件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
AngularJS基礎(chǔ) ng-include 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-include 指令,這里對(duì)ng-include的基本知識(shí)做了整理,并附有代碼實(shí)例,有需要的朋友可以參考下2016-08-08
不能不知道的10個(gè)angularjs英文學(xué)習(xí)網(wǎng)站
這篇文章主要為大家分享了10個(gè)大家不能不知道的angularjs英文網(wǎng)站，供大家學(xué)習(xí)，感興趣的小伙伴們可以參考一下2016-03-03
angularjs select 賦值 ng-options配置方法
下面小編就為大家分享一篇angularjs select 賦值 ng-options配置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
通常我們需要使用管道實(shí)現(xiàn)對(duì)數(shù)據(jù)的格式化，下面這篇文章主要給大家介紹了關(guān)于Angular中管道操作符(|)的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
本文主要介紹AngularJS 事件處理器,這里整理了相關(guān)資料和示例代碼，有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了詳解angular應(yīng)用容器化部署，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問(wèn)題
這篇文章主要介紹了Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
基于angular中的重要指令詳解($eval,$parse和$compile)
下面小編就為大家?guī)?lái)一篇基于angular中的重要指令詳解($eval,$parse和$compile)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10