關(guān)于angular引入ng-zorro的問(wèn)題淺析
更新時(shí)間：2020年09月09日 09:24:21 作者：FisherKai
這篇文章主要給大家介紹了關(guān)于angular引入ng-zorro的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
ng-zorro的官網(wǎng)上提供了兩種在項(xiàng)目中添加ng-zorro的方法，下面記錄其提供的第二種自行構(gòu)建的方式。
第一步：執(zhí)行該命令創(chuàng)建新的angular項(xiàng)目，若沒(méi)安裝angular/cli請(qǐng)執(zhí)行安裝
ng new new-project
第二步：添加ng-zorro
npm install ng-zorro-antd --save
第三步：引入模塊
在app.module.ts文件中引入
import { NgZorroAntdModule } from 'ng-zorro-antd';
...... imports: [ BrowserModule, FormsModule, HttpClientModule, BrowserAnimationsModule, /** 導(dǎo)入 ng-zorro-antd 模塊 **/ NgZorroAntdModule ] ......
第四步：在 angular.json 文件中引入樣式
{
"assets": [
...
],
"styles": [
...
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
] }
第五步：在入口style.css或者style.less文件下引入組件樣式
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本樣式 */ @import "~ng-zorro-antd/button/style/index.min.css"; /* 引入組件樣式 */
或
@import "~ng-zorro-antd/style/entry.less"; /* 引入基本樣式 */ @import "~ng-zorro-antd/button/style/entry.less"; /* 引入組件樣式 */
然后在所需要的組件中使用ng-zorro就可正常使用了。
總結(jié)
到此這篇關(guān)于關(guān)于angular引入ng-zorro的問(wèn)題的文章就介紹到這了,更多相關(guān)angular引入ng-zorr問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Angular?@Injectable注解的工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
AngularJS+Node.js實(shí)現(xiàn)在線聊天室
隨著互聯(lián)網(wǎng)和信息技術(shù)的發(fā)展，如何快速構(gòu)建高效、強(qiáng)大的動(dòng)態(tài)網(wǎng)站成為很多人研究的熱點(diǎn)。該文將結(jié)合AngularJS和Node.js構(gòu)建一個(gè)在線聊天室，體現(xiàn)AngularJs和Node.js整合的優(yōu)點(diǎn)。2015-08-08
Angularjs驗(yàn)證用戶輸入的字符串是否為日期時(shí)間
這篇文章主要介紹了Angularjs驗(yàn)證用戶輸入的字符串是否為日期時(shí)間,需要的朋友可以參考下2017-06-06
Bootstrap與Angularjs的模態(tài)框?qū)嵗a
這篇文章主要介紹了Bootstrap與Angularjs的模態(tài)框?qū)嵗a,需要的朋友可以參考下2017-08-08
Angularjs通過(guò)指令監(jiān)聽(tīng)ng-repeat渲染完成后執(zhí)行腳本的方法
指令是angular的核心功能之一，用好了事半功倍，監(jiān)聽(tīng)ng-repeat執(zhí)行狀態(tài)僅僅是它功能的冰山一角吧。下面這篇文章主要介紹了Angularjs通過(guò)指令監(jiān)聽(tīng)ng-repeat渲染完成后執(zhí)行腳本的方法,需要的朋友可以參考下。2016-12-12
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要介紹了AngularJS刪除路由中的#符號(hào)的方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了詳解Angular6 熱加載配置方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)
下面小編就為大家?guī)?lái)一篇AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
簡(jiǎn)介AngularJS的視圖功能應(yīng)用
這篇文章主要介紹了AngularJS的視圖功能應(yīng)用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以參考下2015-06-06