• Empty空状态
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • nz-emptycomponent
      • NzEmptyServiceservice
      • InjectionToken
      • 全局自定义空组件

    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. styles: []
    8. })
    9. 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. styles: []
    21. })
    22. export class NzDemoEmptyCustomizeComponent {
    23. onClick(): void {
    24. console.log('clicked');
    25. }
    26. }

    Empty空状态 - 图3

    全局化配置

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

    1. import { Component, TemplateRef, ViewChild } from '@angular/core';
    2. import { NzEmptyService } from 'ng-zorro-antd';
    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 type="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') 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

    单独引入此组件

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

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

    nz-emptycomponent

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

    NzEmptyServiceservice

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

    InjectionToken

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

    全局自定义空组件

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