refactor(module:input-number): refactor control flow component (#8360)

NG-ZORRO · Feb 1, 2024 · 57cf8b3 · 57cf8b3
1 parent 535efe4
commit 57cf8b3
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 71 deletions.
diff --git a/components/input-number/input-number-group-slot.component.ts b/components/input-number/input-number-group-slot.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, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
@@ -15,7 +14,9 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <span nz-icon [nzType]="icon" *ngIf="icon"></span>
+    @if (icon) {
+      <span nz-icon [nzType]="icon"></span>
+    }
     <ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
     <ng-content></ng-content>
   `,
@@ -24,7 +25,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     '[class.ant-input-number-prefix]': `type === 'prefix'`,
     '[class.ant-input-number-suffix]': `type === 'suffix'`
   },
-  imports: [NzIconModule, NgIf, NzOutletModule],
+  imports: [NzIconModule, NzOutletModule],
   standalone: true
 })
 export class NzInputNumberGroupSlotComponent {

diff --git a/components/input-number/input-number-group.component.ts b/components/input-number/input-number-group.component.ts
@@ -5,7 +5,7 @@
 
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -51,62 +51,64 @@ export class NzInputNumberGroupWhitSuffixOrPrefixDirective {
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [NzFormNoStatusService],
   template: `
-    <span class="ant-input-number-wrapper ant-input-number-group" *ngIf="isAddOn; else noAddOnTemplate">
-      <div
-        *ngIf="nzAddOnBefore || nzAddOnBeforeIcon"
-        nz-input-number-group-slot
-        type="addon"
-        [icon]="nzAddOnBeforeIcon"
-        [template]="nzAddOnBefore"
-      ></div>
-      <div
-        *ngIf="isAffix || hasFeedback; else contentTemplate"
-        class="ant-input-number-affix-wrapper"
-        [class.ant-input-number-affix-wrapper-disabled]="disabled"
-        [class.ant-input-number-affix-wrapper-sm]="isSmall"
-        [class.ant-input-number-affix-wrapper-lg]="isLarge"
-        [class.ant-input-number-affix-wrapper-focused]="focused"
-        [ngClass]="affixInGroupStatusCls"
-      >
-        <ng-template [ngTemplateOutlet]="affixTemplate"></ng-template>
-      </div>
-      <span
-        *ngIf="nzAddOnAfter || nzAddOnAfterIcon"
-        nz-input-number-group-slot
-        type="addon"
-        [icon]="nzAddOnAfterIcon"
-        [template]="nzAddOnAfter"
-      ></span>
-    </span>
-    <ng-template #noAddOnTemplate>
-      <ng-template [ngIf]="isAffix" [ngIfElse]="contentTemplate">
-        <ng-template [ngTemplateOutlet]="affixTemplate"></ng-template>
-      </ng-template>
-    </ng-template>
-    <ng-template #affixTemplate>
-      <span
-        *ngIf="nzPrefix || nzPrefixIcon"
-        nz-input-number-group-slot
-        type="prefix"
-        [icon]="nzPrefixIcon"
-        [template]="nzPrefix"
-      ></span>
-      <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
-      <span
-        *ngIf="nzSuffix || nzSuffixIcon || isFeedback"
-        nz-input-number-group-slot
-        type="suffix"
-        [icon]="nzSuffixIcon"
-        [template]="nzSuffix"
-      >
-        <nz-form-item-feedback-icon *ngIf="isFeedback" [status]="status"></nz-form-item-feedback-icon>
+    @if (isAddOn) {
+      <span class="ant-input-number-wrapper ant-input-number-group">
+        @if (nzAddOnBefore || nzAddOnBeforeIcon) {
+          <div nz-input-number-group-slot type="addon" [icon]="nzAddOnBeforeIcon" [template]="nzAddOnBefore"></div>
+        }
+
+        @if (isAffix || hasFeedback) {
+          <div
+            class="ant-input-number-affix-wrapper"
+            [class.ant-input-number-affix-wrapper-disabled]="disabled"
+            [class.ant-input-number-affix-wrapper-sm]="isSmall"
+            [class.ant-input-number-affix-wrapper-lg]="isLarge"
+            [class.ant-input-number-affix-wrapper-focused]="focused"
+            [ngClass]="affixInGroupStatusCls"
+          >
+            <ng-template [ngTemplateOutlet]="affixTemplate"></ng-template>
+          </div>
+        } @else {
+          <ng-template [ngTemplateOutlet]="contentTemplate" />
+        }
+
+        @if (nzAddOnAfter || nzAddOnAfterIcon) {
+          <span nz-input-number-group-slot type="addon" [icon]="nzAddOnAfterIcon" [template]="nzAddOnAfter"></span>
+        }
       </span>
+    } @else {
+      @if (isAffix) {
+        <ng-template [ngTemplateOutlet]="affixTemplate" />
+      } @else {
+        <ng-template [ngTemplateOutlet]="contentTemplate" />
+      }
+    }
+
+    <!-- Affix Template -->
+    <ng-template #affixTemplate>
+      @if (nzPrefix || nzPrefixIcon) {
+        <span nz-input-number-group-slot type="prefix" [icon]="nzPrefixIcon" [template]="nzPrefix"></span>
+      }
+      <ng-template [ngTemplateOutlet]="contentTemplate" />
+      @if (nzSuffix || nzSuffixIcon || isFeedback) {
+        <span nz-input-number-group-slot type="suffix" [icon]="nzSuffixIcon" [template]="nzSuffix">
+          @if (isFeedback) {
+            <nz-form-item-feedback-icon [status]="status" />
+          }
+        </span>
+      }
     </ng-template>
+
+    <!-- Content Template -->
     <ng-template #contentTemplate>
-      <ng-content></ng-content>
-      <span *ngIf="!isAddOn && !isAffix && isFeedback" nz-input-number-group-slot type="suffix">
-        <nz-form-item-feedback-icon *ngIf="isFeedback" [status]="status"></nz-form-item-feedback-icon>
-      </span>
+      <ng-content />
+      @if (!isAddOn && !isAffix && isFeedback) {
+        <span nz-input-number-group-slot type="suffix">
+          @if (isFeedback) {
+            <nz-form-item-feedback-icon [status]="status" />
+          }
+        </span>
+      }
     </ng-template>
   `,
   host: {
@@ -123,7 +125,7 @@ export class NzInputNumberGroupWhitSuffixOrPrefixDirective {
     '[class.ant-input-number-affix-wrapper-lg]': `!isAddOn && isAffix && isLarge`,
     '[class.ant-input-number-affix-wrapper-sm]': `!isAddOn && isAffix && isSmall`
   },
-  imports: [NgIf, NzInputNumberGroupSlotComponent, NgClass, NgTemplateOutlet, NzFormPatchModule],
+  imports: [NzInputNumberGroupSlotComponent, NgClass, NgTemplateOutlet, NzFormPatchModule],
   standalone: true
 })
 export class NzInputNumberGroupComponent implements AfterContentInit, OnChanges, OnInit, OnDestroy {

diff --git a/components/input-number/input-number-group.spec.ts b/components/input-number/input-number-group.spec.ts
@@ -417,17 +417,16 @@ export class NzTestInputNumberGroupMixComponent {}
 
 @Component({
   template: `
-    <ng-container *ngIf="!isAddon">
+    @if (!isAddon) {
       <nz-input-number-group [nzPrefix]="prefixTemplateClock" [nzStatus]="status">
-        <nz-input-number></nz-input-number>
+        <nz-input-number />
       </nz-input-number-group>
       <ng-template #prefixTemplateClock><span nz-icon nzType="clock-circle" nzTheme="outline"></span></ng-template>
-    </ng-container>
-    <ng-container *ngIf="isAddon">
+    } @else {
       <nz-input-number-group nzAddOnAfterIcon="setting" [nzStatus]="status">
-        <nz-input-number></nz-input-number>
+        <nz-input-number />
       </nz-input-number-group>
-    </ng-container>
+    }
   `
 })
 export class NzTestInputNumberGroupWithStatusComponent {

diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts
@@ -6,7 +6,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { DOWN_ARROW, ENTER, UP_ARROW } from '@angular/cdk/keycodes';
-import { NgIf } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -87,11 +86,9 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
         (ngModelChange)="onModelChange($event)"
       />
     </div>
-    <nz-form-item-feedback-icon
-      class="ant-input-number-suffix"
-      *ngIf="hasFeedback && !!status && !nzFormNoStatusService"
-      [status]="status"
-    ></nz-form-item-feedback-icon>
+    @if (hasFeedback && !!status && !nzFormNoStatusService) {
+      <nz-form-item-feedback-icon class="ant-input-number-suffix" [status]="status" />
+    }
   `,
   providers: [
     {
@@ -114,7 +111,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     '[class.ant-input-number-rtl]': `dir === 'rtl'`,
     '[class.ant-input-number-borderless]': `nzBorderless`
   },
-  imports: [NzIconModule, FormsModule, NzFormPatchModule, NgIf],
+  imports: [NzIconModule, FormsModule, NzFormPatchModule],
   standalone: true
 })
 export class NzInputNumberComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy {