refactor(module:badge): implement new code flow (#8293)

NG-ZORRO · Dec 17, 2023 · 7c51824 · 7c51824
1 parent 4bd2290
commit 7c51824
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 42 deletions.
diff --git a/components/badge/badge-sup.component.ts b/components/badge/badge-sup.component.ts
@@ -3,7 +3,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgFor, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -27,27 +26,27 @@ import { NzSafeAny, NzSizeDSType } from 'ng-zorro-antd/core/types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [zoomBadgeMotion],
   standalone: true,
-  imports: [NgFor, NgIf, NzNoAnimationDirective],
+  imports: [NzNoAnimationDirective],
   template: `
-    <ng-container *ngIf="count <= nzOverflowCount; else overflowTemplate">
-      <span
-        [nzNoAnimation]="noAnimation"
-        *ngFor="let n of maxNumberArray; let i = index"
-        class="ant-scroll-number-only"
-        [style.transform]="'translateY(' + -countArray[i] * 100 + '%)'"
-      >
-        <ng-container *ngIf="!nzDot && countArray[i] !== undefined">
-          <p
-            *ngFor="let p of countSingleArray"
-            class="ant-scroll-number-only-unit"
-            [class.current]="p === countArray[i]"
-          >
-            {{ p }}
-          </p>
-        </ng-container>
-      </span>
-    </ng-container>
-    <ng-template #overflowTemplate>{{ nzOverflowCount }}+</ng-template>
+    @if (count <= nzOverflowCount) {
+      @for (n of maxNumberArray; track n; let i = $index) {
+        <span
+          [nzNoAnimation]="noAnimation"
+          class="ant-scroll-number-only"
+          [style.transform]="'translateY(' + -countArray[i] * 100 + '%)'"
+        >
+          @if (!nzDot && countArray[i] !== undefined) {
+            @for (p of countSingleArray; track p) {
+              <p class="ant-scroll-number-only-unit" [class.current]="p === countArray[i]">
+                {{ p }}
+              </p>
+            }
+          }
+        </span>
+      }
+    } @else {
+      {{ nzOverflowCount }}+
+    }
   `,
   host: {
     class: 'ant-scroll-number',

diff --git a/components/badge/badge.component.ts b/components/badge/badge.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgIf, NgStyle } from '@angular/common';
+import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -45,9 +45,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [zoomBadgeMotion],
   standalone: true,
-  imports: [NgIf, NgStyle, NzBadgeSupComponent, NzOutletModule],
+  imports: [NgStyle, NzBadgeSupComponent, NzOutletModule],
   template: `
-    <ng-container *ngIf="nzStatus || nzColor">
+    @if (nzStatus || nzColor) {
       <span
         class="ant-badge-status-dot ant-badge-status-{{ nzStatus || presetColor }}"
         [style.background]="!presetColor && nzColor"
@@ -56,21 +56,22 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
       <span class="ant-badge-status-text">
         <ng-container *nzStringTemplateOutlet="nzText">{{ nzText }}</ng-container>
       </span>
-    </ng-container>
-    <ng-content></ng-content>
+    }
+    <ng-content />
     <ng-container *nzStringTemplateOutlet="nzCount">
-      <nz-badge-sup
-        *ngIf="showSup"
-        [nzOffset]="nzOffset"
-        [nzSize]="nzSize"
-        [nzTitle]="nzTitle"
-        [nzStyle]="nzStyle"
-        [nzDot]="nzDot"
-        [nzOverflowCount]="nzOverflowCount"
-        [disableAnimation]="!!(nzStandalone || nzStatus || nzColor || noAnimation?.nzNoAnimation)"
-        [nzCount]="nzCount"
-        [noAnimation]="!!noAnimation?.nzNoAnimation"
-      ></nz-badge-sup>
+      @if (showSup) {
+        <nz-badge-sup
+          [nzOffset]="nzOffset"
+          [nzSize]="nzSize"
+          [nzTitle]="nzTitle"
+          [nzStyle]="nzStyle"
+          [nzDot]="nzDot"
+          [nzOverflowCount]="nzOverflowCount"
+          [disableAnimation]="!!(nzStandalone || nzStatus || nzColor || noAnimation?.nzNoAnimation)"
+          [nzCount]="nzCount"
+          [noAnimation]="!!noAnimation?.nzNoAnimation"
+        />
+      }
     </ng-container>
   `,
   host: {

diff --git a/components/badge/badge.spec.ts b/components/badge/badge.spec.ts
@@ -204,7 +204,9 @@ describe('badge', () => {
       [nzStandalone]="!inner"
       [nzSize]="size"
     >
-      <a *ngIf="inner"></a>
+      @if (inner) {
+        <a></a>
+      }
     </nz-badge>
   `
 })

diff --git a/components/badge/demo/colorful.ts b/components/badge/demo/colorful.ts
@@ -5,9 +5,11 @@ import { Component } from '@angular/core';
   template: `
     <div>
       <h4>Presets:</h4>
-      <div *ngFor="let color of colors">
-        <nz-badge [nzColor]="color" [nzText]="color"></nz-badge>
-      </div>
+      @for (color of colors; track color) {
+        <div>
+          <nz-badge [nzColor]="color" [nzText]="color"></nz-badge>
+        </div>
+      }
       <br />
       <h4>Custom:</h4>
       <nz-badge nzColor="#f50" nzText="#f50"></nz-badge>