關於angular引入ng-zorro的問題淺析
阿新 • • 發佈:2020-09-09
ng-zorro的官網上提供了兩種在專案中新增ng-zorro的方法,下面記錄其提供的第二種自行構建的方式。
第一步:執行該命令建立新的angular專案,若沒安裝angular/cli請執行安裝
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,/** 匯入 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就可正常使用了。
總結
到此這篇關於關於angular引入ng-zorro的問題的文章就介紹到這了,更多相關angular引入ng-zorr問題內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!