refactor(module:empty): refactor control flow component (#8331)

NG-ZORRO · Jan 4, 2024 · ca909cd · ca909cd
1 parent edbe038
commit ca909cd
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 30 deletions.
diff --git a/components/empty/config.ts b/components/empty/config.ts
@@ -14,6 +14,6 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 export type NzEmptySize = 'normal' | 'small' | '';
 
-export type NzEmptyCustomContent = Type<NzSafeAny> | TemplateRef<NzSafeAny> | string;
+export type NzEmptyCustomContent = Type<NzSafeAny> | TemplateRef<NzSafeAny> | string | null;
 
 export const NZ_EMPTY_COMPONENT_NAME = new InjectionToken<string>('nz-empty-component-name');
diff --git a/components/empty/embed-empty.component.ts b/components/empty/embed-empty.component.ts
@@ -4,7 +4,6 @@
  */
 
 import { ComponentPortal, Portal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
-import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -26,7 +25,7 @@ import { startWith, takeUntil } from 'rxjs/operators';
 import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { NzEmptyCustomContent, NzEmptySize, NZ_EMPTY_COMPONENT_NAME } from './config';
+import { NZ_EMPTY_COMPONENT_NAME, NzEmptyCustomContent, NzEmptySize } from './config';
 import { NzEmptyComponent } from './empty.component';
 
 function getEmptySize(componentName: string): NzEmptySize {
@@ -52,19 +51,29 @@ type NzEmptyContentType = 'component' | 'template' | 'string';
   selector: 'nz-embed-empty',
   exportAs: 'nzEmbedEmpty',
   template: `
-    <ng-container *ngIf="!content && specificContent !== null" [ngSwitch]="size">
-      <nz-empty *ngSwitchCase="'normal'" class="ant-empty-normal" [nzNotFoundImage]="'simple'"></nz-empty>
-      <nz-empty *ngSwitchCase="'small'" class="ant-empty-small" [nzNotFoundImage]="'simple'"></nz-empty>
-      <nz-empty *ngSwitchDefault></nz-empty>
-    </ng-container>
-    <ng-container *ngIf="content">
-      <ng-template *ngIf="contentType !== 'string'" [cdkPortalOutlet]="contentPortal"></ng-template>
-      <ng-container *ngIf="contentType === 'string'">
+    @if (content) {
+      @if (contentType === 'string') {
         {{ content }}
-      </ng-container>
-    </ng-container>
+      } @else {
+        <ng-template [cdkPortalOutlet]="contentPortal" />
+      }
+    } @else {
+      @if (specificContent !== null) {
+        @switch (size) {
+          @case ('normal') {
+            <nz-empty class="ant-empty-normal" nzNotFoundImage="simple" />
+          }
+          @case ('small') {
+            <nz-empty class="ant-empty-small" nzNotFoundImage="simple" />
+          }
+          @default {
+            <nz-empty />
+          }
+        }
+      }
+    }
   `,
-  imports: [NzEmptyComponent, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, PortalModule],
+  imports: [NzEmptyComponent, PortalModule],
   standalone: true
 })
 export class NzEmbedEmptyComponent implements OnChanges, OnInit, OnDestroy {

diff --git a/components/empty/empty.component.ts b/components/empty/empty.component.ts
@@ -3,7 +3,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -35,29 +34,38 @@ type NzEmptyNotFoundImageType = (typeof NzEmptyDefaultImages)[number] | null | s
   exportAs: 'nzEmpty',
   template: `
     <div class="ant-empty-image">
-      <ng-container *ngIf="!isImageBuildIn">
+      @if (!isImageBuildIn) {
         <ng-container *nzStringTemplateOutlet="nzNotFoundImage">
           <img [src]="nzNotFoundImage" [alt]="isContentString ? nzNotFoundContent : 'empty'" />
         </ng-container>
-      </ng-container>
-      <nz-empty-default *ngIf="isImageBuildIn && nzNotFoundImage !== 'simple'"></nz-empty-default>
-      <nz-empty-simple *ngIf="isImageBuildIn && nzNotFoundImage === 'simple'"></nz-empty-simple>
-    </div>
-    <p class="ant-empty-description" *ngIf="nzNotFoundContent !== null">
-      <ng-container *nzStringTemplateOutlet="nzNotFoundContent">
-        {{ isContentString ? nzNotFoundContent : locale['description'] }}
-      </ng-container>
-    </p>
-    <div class="ant-empty-footer" *ngIf="nzNotFoundFooter">
-      <ng-container *nzStringTemplateOutlet="nzNotFoundFooter">
-        {{ nzNotFoundFooter }}
-      </ng-container>
+      } @else {
+        @if (nzNotFoundImage === 'simple') {
+          <nz-empty-simple />
+        } @else {
+          <nz-empty-default />
+        }
+      }
     </div>
+    @if (nzNotFoundContent !== null) {
+      <p class="ant-empty-description">
+        <ng-container *nzStringTemplateOutlet="nzNotFoundContent">
+          {{ isContentString ? nzNotFoundContent : locale['description'] }}
+        </ng-container>
+      </p>
+    }
+
+    @if (nzNotFoundFooter) {
+      <div class="ant-empty-footer">
+        <ng-container *nzStringTemplateOutlet="nzNotFoundFooter">
+          {{ nzNotFoundFooter }}
+        </ng-container>
+      </div>
+    }
   `,
   host: {
     class: 'ant-empty'
   },
-  imports: [NgIf, NzOutletModule, NzEmptyDefaultComponent, NzEmptySimpleComponent],
+  imports: [NzOutletModule, NzEmptyDefaultComponent, NzEmptySimpleComponent],
   standalone: true
 })
 export class NzEmptyComponent implements OnChanges, OnInit, OnDestroy {