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

1.官方网址
https://ng.ant.design/docs/introduce/zh
【angular7使用ng-zorro-antd组件指南】注意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模块中去。