Empty空状态

空状态时的展示占位图。

何时使用

当目前没有数据时,用于显式的用户提示。

单独引入此组件

想要了解更多关于单独引入组件的内容,可以在快速上手页面进行查看。

  1. import { NzEmptyModule } from 'ng-zorro-antd/empty';

代码演示

Empty空状态 - 图1

基本

简单的展示。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-empty-basic',
  4. template: `
  5. <nz-empty></nz-empty>
  6. `
  7. })
  8. export class NzDemoEmptyBasicComponent {}

Empty空状态 - 图2

自定义

自定义图片、描述、附属内容。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-empty-customize',
  4. template: `
  5. <nz-empty
  6. [nzNotFoundImage]="
  7. 'https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original'
  8. "
  9. [nzNotFoundContent]="contentTpl"
  10. [nzNotFoundFooter]="footerTpl"
  11. >
  12. <ng-template #contentTpl>
  13. <span> Customize <a href="#API">Description</a> </span>
  14. </ng-template>
  15. <ng-template #footerTpl>
  16. <button nz-button nzType="primary" (click)="onClick()">Create Now</button>
  17. </ng-template>
  18. </nz-empty>
  19. `
  20. })
  21. export class NzDemoEmptyCustomizeComponent {
  22. onClick(): void {
  23. console.log('clicked');
  24. }
  25. }

Empty空状态 - 图3

全局化配置

自定义全局组件的 Empty 样式。

  1. import { Component, TemplateRef, ViewChild } from '@angular/core';
  2. import { NzEmptyService } from 'ng-zorro-antd/empty';
  3. @Component({
  4. selector: 'nz-demo-empty-config',
  5. template: `
  6. <nz-switch
  7. [nzUnCheckedChildren]="'default'"
  8. [nzCheckedChildren]="'customize'"
  9. [(ngModel)]="customize"
  10. (ngModelChange)="onConfigChange()"
  11. >
  12. </nz-switch>
  13. <nz-divider></nz-divider>
  14. <h3>Select</h3>
  15. <nz-select style="width: 200px"></nz-select>
  16. <h3>TreeSelect</h3>
  17. <nz-tree-select style="width: 200px;"></nz-tree-select>
  18. <h3>Cascader</h3>
  19. <nz-cascader style="width: 200px;" [nzShowSearch]="true" [nzOptions]="[]"></nz-cascader>
  20. <h3>Transfer</h3>
  21. <nz-transfer></nz-transfer>
  22. <h3>Table</h3>
  23. <nz-table>
  24. <thead>
  25. <tr>
  26. <th>Title</th>
  27. <th>Age</th>
  28. </tr>
  29. </thead>
  30. </nz-table>
  31. <h3>List</h3>
  32. <nz-list [nzDataSource]="[]"></nz-list>
  33. <ng-template #customTpl let-name>
  34. <div style="text-align: center;">
  35. <i nz-icon nzType="smile" style="font-size: 20px;"></i>
  36. <p>Data Not Found in {{ name }}</p>
  37. </div>
  38. </ng-template>
  39. `,
  40. styles: [
  41. `
  42. h3 {
  43. font-size: inherit;
  44. margin: 16px 0 8px 0;
  45. }
  46. `
  47. ]
  48. })
  49. export class NzDemoEmptyConfigComponent {
  50. @ViewChild('customTpl', { static: false }) customTpl: TemplateRef<any>; // tslint:disable-line:no-any
  51. customize = false;
  52. constructor(private nzEmptyService: NzEmptyService) {}
  53. onConfigChange(): void {
  54. if (this.customize) {
  55. this.nzEmptyService.setDefaultContent(this.customTpl); // tslint:disable-line:no-any
  56. } else {
  57. this.nzEmptyService.resetDefault();
  58. }
  59. }
  60. }

API

nz-emptycomponent

参数说明类型默认值
[nzNotFoundImage]设置显示图片,为 string 时表示自定义图片地址string | TemplateRef<void>-
[nzNotFoundContent]自定义描述内容string | TemplateRef<void>-
[nzNotFoundFooter]设置自定义 footerstring | TemplateRef<void>-

NzEmptyServiceservice

属性/方法说明参数
setDefaultEmptyContent设置全局空内容,空组件的父组件名称将会被传递给模板TemplateRef<string> | string
resetDefault重置默认空内容-

InjectionToken

Token说明参数
NZ_DEFAULT_EMPTY_CONTENT提供一个用户自定义的空组件Component | string
NZ_EMPTY_COMPONENT_NAME将会被注入到 NZ_DEFAULT_EMPTY_CONTENT 中,告诉该组件其父组件的名称string

全局自定义空组件

你或许知道或者用过一些类似 nzNotFoundContent 的属性来自定义组件数据为空时的内容,现在它们都会使用 Empty 组件。你甚至可以通过提供在根模块中提供 NZ_DEFAULT_EMPTY_CONTENT,或者是调用 setDefaultEmptyContent 方法来定义一个自定义的全局空组件。