Angular集成ng-zorro-antd

[deepthan]

集成ng-zorro-antd

1. 安装组件

$ npm install ng-zorro-antd --save

2. 引入模块

import { registerLocaleData } from '@angular/common';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';

/** 配置 angular i18n **/
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);

@NgModule({
  ...
  imports: [
    ...
    /** 导入 ng-zorro-antd 模块 **/
    NgZorroAntdModule
  ],
  /** 配置 ng-zorro-antd 国际化 **/
  providers   : [ { provide: NZ_I18N, useValue: zh_CN } ]
})
export class AppModule { }

这样就成功在全局引入了 ng-zorro-antd。

3. 引入样式与 SVG 资源

在 angular.json 文件中引入样式和 SVG icon 资源。

{
  "assets": [
    ...
    {
      "glob": "**/*",
      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
      "output": "/assets/"
    }
  ],
  "styles": [
    ...
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

注意 修改完 angular.json之后需要重新启动项目方可看到改变。