angular7使用ng-zorro-antd组件指南

1.官方网址

https://ng.ant.design/docs/introduce/zh

注意angular必须升级到最新版本9，如果不升级的话就只能指定ng-zorro-antd版本。
（我使用的angular版本是7，ng-zorro-antd版本是"ng-zorro-antd": "^7.0.0"）

2.使用

不是按照官网的方式。如果想要按照官网的方式必须使用npm，很容易失败。失败的多试几次就可以了。我采用的方式是：

• 1.在你的项目里安装cnpm install ng-zorro-antd --save
• 2.app.module.ts导入模块

import { NgZorroAntdModule } from 'ng-zorro-antd';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

imports: [
   BrowserModule,
   NgZorroAntdModule,
   BrowserAnimationsModule // 如果要引用下拉弹出等具有动画的组件
 ]

• 全局引用样式style.css

@import "~ng-zorro-antd/src/ng-zorro-antd.css";

以上就已经实现引入了。

3.使用图标字体参照如下

app.module.ts

// angular 核心模块导入
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// ng-zorro模块导入
import { NgZorroAntdModule, NZ_I18N, zh_CN, NZ_ICONS } from 'ng-zorro-antd';
import { IconDefinition } from '@ant-design/icons-angular';
import * as AllIcons from '@ant-design/icons-angular/icons';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// 导入
registerLocaleData(zh);

// 静态全量引入 Ng-Zorro-Antd icons
const antDesignIcons = AllIcons as {
  [key: string]: IconDefinition;
};
const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key]);

@NgModule({
  declarations: [
    AppComponent,
    AaComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgZorroAntdModule,
    HttpClientModule,
    BrowserAnimationsModule
  ],
  providers: [
    { provide: NZ_I18N, useValue: zh_CN },
    { provide: NZ_ICONS, useValue: icons }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果你想在其他自定义模块中引用，那么按照上面再次导入即可，或者换到share模块中去。