浅谈ng-zorro使用心得

简介

ng-zorro 是一款基于 Angular 框架的 UI 组件库，提供了丰富的 UI 组件和工具，可以帮助我们快速地构建企业级应用。本篇文章将带大家深入地了解 ng-zorro 的使用心得。

安装和使用

想要使用 ng-zorro，首先需要在项目中安装 ng-zorro 的依赖。可以通过 npm 或 yarn 等包管理工具来安装 ng-zorro。安装示例命令如下：

npm install ng-zorro-antd --save

安装完成后，在项目的模块中引入 ng-zorro，示例代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';

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

这里我们只引入了 NzButtonModule 和 NzIconModule 两个组件模块，当然，ng-zorro 还提供了很多其它组件模块可以使用。

示例

示例一：按钮组件

这里我们将展示如何使用 ng-zorro 的按钮组件。在模板中我们只需要使用 nz-button 标签就可以渲染出 ng-zorro 提供的按钮组件。示例代码如下：

<nz-button nzType="primary">Primary</nz-button>
<nz-button nzType="default">Default</nz-button>
<nz-button nzType="dashed">Dashed</nz-button>
<nz-button nzType="text">Text</nz-button>
<nz-button nzType="link">Link</nz-button>

按钮组件提供了不同的类型（primary、default、dashed、text、link）和尺寸（large、default、small）可供选择，具体属性值可参考官方文档。

示例二：表格组件

这里我们将展示如何使用 ng-zorro 的表格组件。在模板中我们只需要使用 nz-table 标签就可以渲染出 ng-zorro 提供的表格组件。同时，我们需要在组件控制器中定义 tableData 数据和 tableHeader 列头数据，示例代码如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table',
  template: `
    <nz-table [nzData]="tableData">
      <thead>
        <tr>
          <th *ngFor="let header of tableHeader">{{header.name}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of tableData">
          <td *ngFor="let header of tableHeader">{{data[header.key]}}</td>
        </tr>
      </tbody>
    </nz-table>
  `
})
export class TableComponent implements OnInit {
  tableHeader = [
    {name: '姓名', key: 'name'},
    {name: '年龄', key: 'age'},
    {name: '工作单位', key: 'company'},
  ];

  tableData = [
    {name: '张三', age: 20, company: 'ABC公司'},
    {name: '李四', age: 30, company: 'DEF公司'},
    {name: '王五', age: 25, company: 'GHI公司'},
    {name: '赵六', age: 28, company: 'JKL公司'}
  ];

  constructor() { }

  ngOnInit() {
  }

}

表格组件可以实现数据的绑定和分页功能，同时还支持排序、筛选和多种操作。具体用法可参考官方文档。