refactor(module:card): implement new control flow (#8301)

perf(module:card): track by classname perf(module:card): track by listOfClassName
NG-ZORRO · Dec 18, 2023 · c29aa31 · c29aa31
1 parent 0f94d0a
commit c29aa31
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 44 deletions.
diff --git a/components/card/card-loading.component.ts b/components/card/card-loading.component.ts
@@ -11,15 +11,15 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
   exportAs: 'nzCardLoading',
   template: `
     <div class="ant-card-loading-content">
-      <div class="ant-row" style="margin-left: -4px; margin-right: -4px;" *ngFor="let listOfClassName of listOfLoading">
-        <div
-          *ngFor="let className of listOfClassName"
-          [ngClass]="className"
-          style="padding-left: 4px; padding-right: 4px;"
-        >
-          <div class="ant-card-loading-block"></div>
+      @for (listOfClassName of listOfLoading; track listOfClassName) {
+        <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
+          @for (className of listOfClassName; track className) {
+            <div [ngClass]="className" style="padding-left: 4px; padding-right: 4px;">
+              <div class="ant-card-loading-block"></div>
+            </div>
+          }
         </div>
-      </div>
+      }
     </div>
   `,
   preserveWhitespaces: false,

diff --git a/components/card/card-meta.component.ts b/components/card/card-meta.component.ts
@@ -15,17 +15,26 @@ import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   template: `
-    <div class="ant-card-meta-avatar" *ngIf="nzAvatar">
-      <ng-template [ngTemplateOutlet]="nzAvatar"></ng-template>
-    </div>
-    <div class="ant-card-meta-detail" *ngIf="nzTitle || nzDescription">
-      <div class="ant-card-meta-title" *ngIf="nzTitle">
-        <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+    @if (nzAvatar) {
+      <div class="ant-card-meta-avatar">
+        <ng-template [ngTemplateOutlet]="nzAvatar" />
       </div>
-      <div class="ant-card-meta-description" *ngIf="nzDescription">
-        <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
+    }
+
+    @if (nzTitle || nzDescription) {
+      <div class="ant-card-meta-detail">
+        @if (nzTitle) {
+          <div class="ant-card-meta-title">
+            <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+          </div>
+        }
+        @if (nzDescription) {
+          <div class="ant-card-meta-description">
+            <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
+          </div>
+        }
       </div>
-    </div>
+    }
   `,
   host: { class: 'ant-card-meta' },
   imports: [NgIf, NgTemplateOutlet, NzOutletModule],

diff --git a/components/card/card.component.ts b/components/card/card.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgForOf, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -40,35 +40,48 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   template: `
-    <div class="ant-card-head" *ngIf="nzTitle || nzExtra || listOfNzCardTabComponent">
-      <div class="ant-card-head-wrapper">
-        <div class="ant-card-head-title" *ngIf="nzTitle">
-          <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
-        </div>
-        <div class="ant-card-extra" *ngIf="nzExtra">
-          <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+    @if (nzTitle || nzExtra || listOfNzCardTabComponent) {
+      <div class="ant-card-head">
+        <div class="ant-card-head-wrapper">
+          @if (nzTitle) {
+            <div class="ant-card-head-title">
+              <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
+            </div>
+          }
+          @if (nzExtra) {
+            <div class="ant-card-extra">
+              <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+            </div>
+          }
         </div>
+        @if (listOfNzCardTabComponent) {
+          <ng-template [ngTemplateOutlet]="listOfNzCardTabComponent.template" />
+        }
       </div>
-      <ng-container *ngIf="listOfNzCardTabComponent">
-        <ng-template [ngTemplateOutlet]="listOfNzCardTabComponent.template"></ng-template>
-      </ng-container>
-    </div>
-    <div class="ant-card-cover" *ngIf="nzCover">
-      <ng-template [ngTemplateOutlet]="nzCover"></ng-template>
-    </div>
+    }
+
+    @if (nzCover) {
+      <div class="ant-card-cover">
+        <ng-template [ngTemplateOutlet]="nzCover" />
+      </div>
+    }
+
     <div class="ant-card-body" [ngStyle]="nzBodyStyle">
-      <ng-container *ngIf="!nzLoading; else loadingTemplate">
-        <ng-content></ng-content>
-      </ng-container>
-      <ng-template #loadingTemplate>
-        <nz-card-loading></nz-card-loading>
-      </ng-template>
+      @if (!nzLoading) {
+        <ng-content />
+      } @else {
+        <nz-card-loading />
+      }
     </div>
-    <ul class="ant-card-actions" *ngIf="nzActions.length">
-      <li *ngFor="let action of nzActions" [style.width.%]="100 / nzActions.length">
-        <span><ng-template [ngTemplateOutlet]="action"></ng-template></span>
-      </li>
-    </ul>
+    @if (nzActions.length) {
+      <ul class="ant-card-actions">
+        @for (action of nzActions; track $index) {
+          <li [style.width.%]="100 / nzActions.length">
+            <span><ng-template [ngTemplateOutlet]="action" /></span>
+          </li>
+        }
+      </ul>
+    }
   `,
   host: {
     class: 'ant-card',
@@ -81,7 +94,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
     '[class.ant-card-contain-tabs]': '!!listOfNzCardTabComponent',
     '[class.ant-card-rtl]': `dir === 'rtl'`
   },
-  imports: [NgIf, NzOutletModule, NgTemplateOutlet, NgStyle, NzCardLoadingComponent, NgForOf],
+  imports: [NzOutletModule, NgTemplateOutlet, NgStyle, NzCardLoadingComponent],
   standalone: true
 })
 export class NzCardComponent implements OnDestroy, OnInit {