Angular中使用ng-zorro圖標(biāo)庫部分圖標(biāo)不能正常顯示問題
在ng-alain中，使用ng-zorro圖標(biāo)庫，發(fā)現(xiàn)部分能正常顯示，部分并不能顯示，在控制臺同時發(fā)現(xiàn)出錯報錯。
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)以上問題是沒有對相對的圖標(biāo)進(jìn)行導(dǎo)入，并導(dǎo)出。
ng-alain默認(rèn)只導(dǎo)入了圖標(biāo)庫的幾十個圖標(biāo)，在 style-icons-auto.ts可進(jìn)行查看。
因此可以參考style-icons-auto.ts，把你所需要的圖標(biāo)進(jìn)行import and export
ng-zorro圖標(biāo)庫：https://ng.ant.design/compone...
PS:下面看下ng-zorro等組件默認(rèn)樣式的修改
在項目中修改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;
}
注意：上面三種方法可分別嘗試一下，不同情況下其中之一會生效。
截止目前最新的7.0.0-rc.0 版本
table組件tbody中的td中的內(nèi)容超出時默認(rèn)會換行，想要實現(xiàn)xxxx...的效果需要一個hack：
::ng-deep .ant-table-tbody > tr > td {
max-width: 0;
white-space: nowrap;
}
總結(jié)
以上所述是小編給大家介紹的Angular中使用ng-zorro圖標(biāo)庫部分圖標(biāo)不能正常顯示,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
angularJs在多個控制器中共享服務(wù)數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs在多個控制器中共享服務(wù)數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Angularjs中ng-repeat-start與ng-repeat-end的用法實例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開始先進(jìn)行了簡單的介紹，而后通過完整的實例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能,涉及AngularJS事件響應(yīng)與數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
一個緩存就是一個組件，它可以透明地儲存數(shù)據(jù)，以便以后可以更快地服務(wù)于請求。這篇文章主要介紹了AngularJS中的緩存使用，有興趣的可以了解一下。2017-01-01
高效利用Angular中內(nèi)置服務(wù)$http、$location等
這篇文章主要介紹了如何高效利用Angular中內(nèi)置服務(wù)，大家知道的Angular內(nèi)置服務(wù)有哪些，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了AngularJS雙向綁定和依賴反轉(zhuǎn)實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
淺談angular4 ng-content 中隱藏的內(nèi)容
本篇文章主要介紹了淺談angular4 ng-content 中隱藏的內(nèi)容，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
解決Angular2 router.navigate刷新頁面的問題
今天小編就為大家分享一篇解決Angular2 router.navigate刷新頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文主要介紹AngularJS API,這里對AngularJS的指令,事件,全局API等做中文翻譯,希望能幫助有需要的小伙伴2016-07-07
快速學(xué)習(xí)AngularJs HTTP響應(yīng)攔截器
任何時候，如果我們想要為請求添加全局功能，例如身份認(rèn)證、錯誤處理等，在請求發(fā)送給服務(wù)器之前或服務(wù)器返回時對其進(jìn)行攔截，是比較好的實現(xiàn)手段2015-12-12