在基于angular5的工程中使用ng-zorro的體會
一、ng-zorro介紹
Ant Design 的 Angular 實現(xiàn)，開發(fā)和服務于企業(yè)級后臺產品。
其中
1.4.0版本 支持 angualr 6
0.7.X版本 支持 angualr 5 (推薦)
0.6.X版本 支持 angular 5
0.5.X版本 支持 angular 4
由于項目需要tree組件，而且項目是angular 5的枝恋，因此安裝0.7.1版本。
二嗡害、安裝和配置
1.首先應當安裝node.js焚碌，并安裝angular腳手架工具：angular/cli：
npm install -g @angular/cli@1.7.4
注意：因為項目是基于angular5的，所以腳手架工具沒必要裝最新的6.1版本霸妹，而且angular/cli 6之后的腳手架工具里把之前版本中的 .angular-cli.json換成了angular.json十电，安裝最新版本之后會有一些不必要的麻煩。因此這里推薦angular/cli1.7.4。
2.安裝ng-zorro組件
npm install ng-zorro-antd@0.7.1 --save
注意鹃骂，官網上提示的這個
npm install ng-zorro-antd --save
實際上是安裝了最新版1.4.0台盯，這在angular 5項目中是用不了的，這點需要注意畏线，遇到
npm install
這樣的命令静盅，應當考慮安裝的版本，否則默認都是安裝的最新的版本寝殴，可能會導致與現(xiàn)有的項目發(fā)生沖突蒿叠，會很麻煩。
3.引入模塊
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { AppComponent } from './app.component';
/** 注冊語言包 ** /
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
NgZorroAntdModule.forRoot()
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
在app.module.ts中應當包含如上所示的代碼杯矩，注意：
在根 module 中需要使用 NgZorroAntdModule.forRoot()栈虚，在子 module 需要使用 NgZorroAntdModule。
4.引入樣式
修改 .angular-cli.json 文件的 styles 列表
...
"styles": [
"../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
]
...
此處應當注意史隆，若angular/cli 版本為6.X，則需要在angular.json中修改如下
"styles": [
"src/styles.css",
"node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css"
],
這里官網介紹的有誤曼验，需要特別注意泌射。
