angular5中使用ng zorro (Ant Design of Angular)

在基于angular5的工程中使用ng-zorro的体会

一、ng-zorro介绍

Ant Design 的 Angular 实现，开发和服务于企业级后台产品。

ng-zorro官网

其中

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/[email protected]

注意：因为项目是基于angular5的，所以脚手架工具没必要装最新的6.1版本，而且angular/cli 6之后的脚手架工具里把之前版本中的 .angular-cli.json换成了angular.json，安装最新版本之后会有一些不必要的麻烦。因此这里推荐angular/cli1.7.4。

2.安装ng-zorro组件

npm install [email protected] --save

注意，官网上提示的这个

 npm install ng-zorro-antd --save

实际上是安装了最新版1.4.0，这在angular 5项目中是用不了的，这点需要注意，遇到
npm install
这样的命令，应当考虑安装的版本，否则默认都是安装的最新的版本，可能会导致与现有的项目发生冲突，会很麻烦。

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"
        ],

这里官网介绍的有误，需要特别注意。