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模块中去。

你可能感兴趣的:(angular7使用ng-zorro-antd组件指南)