学习笔记：ng-zorro

发表于 更新于 分类于 阅读次数：
本文字数： 2k 阅读时长 ≈ 2 分钟
ng-zorro 是一个用在 Angular 项目上的组件库

基本知识

1.自动安装

新建一个 Angular 项目：

1
ng new project

进入项目目录，完成组件的初始化，包括引入国际化文件、导入模块、引入样式文件等：

1
ng add ng-zorro-antd

运行项目

1
ng serve --open

2.手动安装

如果项目本身已经存在时可以手动进行安装该组件

安装组件：

1
npm install ng-zorro-antd --save

使用全局样式：

  • 在 angular.json 中引入全部组件样式:

1
2
3
4
5
{
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

  • 在 style.css 中引入预构建样式文件:

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

使用特定组件样式：

  • 先引入基本样式，再引入组件样式

1
2
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */

在 app.module.ts 中引入组件模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NzButtonModule
  ]
})
export class AppModule { }

在模板中使用：

1
<button nz-button nzType="primary">Primary</button>

组件相关

通用方法

找到各个组件的模块引入语句：

  • 如果整个项目只有 app 一个 module，那么就需要在它中引入，并加入到 imports 数组中

  • 如果整个项目中还有其他 module，且是该 module 下的页面需要引用该组件，那么加需要在 该 module 中引入，并加入到 imports 数组中

复制组件代码，粘贴到需要使用的页面中即可

图标

(1).静态加载

官方推荐只加载需要的图标，方法如下：

  • 先引入图标模块

  • 然后找到需要的图标，引入该图标，命名方式如下：

    • 先首字母大写，如果有 -，去掉连字符并将连字符后面的单词首字母大写，最后接着图标主题风格(Outline、Fill、TwoTone)
    • 例：account-book 即为 AccountBookOutline
1
import { AccountBookOutline, AccountBookFill, AccountBookTwoTone } from '@ant-design/icons-angular/icons';

  • 定义一个数组来接收这些图标

1
2
import { IconDefinition } from '@ant-design/icons-angular';
const icons: IconDefinition[] = [AccountBookOutline, AccountBookFill, AccountBookTwoTone];

  • 修改 imports 数组

1
NzIconModule.forRoot(icons)

  • 最后将组件代码复制进去即可

官方不推荐的加载全部图标，请前往 这里 查看

(2).动态加载

引入图标模块

修改 angular.json 文件如下：

1
2
3
4
5
6
7
"assets": [
  {
    "glob": "**/*",
    "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
    "output": "/assets/"
  }
],

重新编译项目即可正常加载图标

项目实战

待办事项

https://juejin.cn/post/6844903778164949000#heading-36