refactor(module:segmented): refactor segmented control flow (#8519)

* refactor(module:segmented): refactor segmented control flow * refactor(module:segmented): remove useless imports Co-authored-by: Nicoss54 <Nicoss54@users.noreply.github.com> --------- Co-authored-by: hyperlife1119 <hyperlife1119@qq.com> Co-authored-by: Nicoss54 <Nicoss54@users.noreply.github.com>
NG-ZORRO · Apr 23, 2024 · d48dfa2 · d48dfa2
1 parent bfead91
commit d48dfa2
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 43 deletions.
diff --git a/components/segmented/demo/custom.ts b/components/segmented/demo/custom.ts
@@ -4,23 +4,25 @@ import { NzSegmentedOption } from 'ng-zorro-antd/segmented';
 
 @Component({
   selector: 'nz-demo-segmented-custom',
-  template: `<nz-segmented [nzLabelTemplate]="templateRef" [nzOptions]="options"></nz-segmented>
+  template: `
+    <nz-segmented [nzLabelTemplate]="templateRef" [nzOptions]="options"></nz-segmented>
     <ng-template #temp let-index="index">
-      <ng-container [ngSwitch]="index">
-        <ng-container *ngSwitchCase="0">
+      @switch (index) {
+        @case (0) {
           <nz-avatar nzSrc="https://joeschmoe.io/api/v1/random"></nz-avatar>
           <div>User 1</div>
-        </ng-container>
-        <ng-container *ngSwitchCase="1">
+        }
+        @case (1) {
           <nz-avatar nzText="K"></nz-avatar>
           <div>User 2</div>
-        </ng-container>
-        <ng-container *ngSwitchCase="2">
+        }
+        @case (2) {
           <nz-avatar nzIcon="user"></nz-avatar>
           <div>User 3</div>
-        </ng-container>
-      </ng-container>
-    </ng-template> `,
+        }
+      }
+    </ng-template>
+  `,
   styles: [
     `
       .code-box-demo {

diff --git a/components/segmented/segmented.component.ts b/components/segmented/segmented.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgClass, NgForOf, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -45,42 +45,44 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'segmented';
   template: `
     <!-- thumb motion div -->
     <div class="ant-segmented-group">
-      <div
-        *ngIf="animationState"
-        [ngClass]="{ 'ant-segmented-thumb': true, 'ant-segmented-thumb-motion': true }"
-        [@thumbMotion]="animationState"
-        (@thumbMotion.done)="handleThumbAnimationDone($event)"
-      ></div>
-      <label
-        #itemLabels
-        *ngFor="let item of normalizedOptions; let i = index"
-        [ngClass]="{
-          'ant-segmented-item': true,
-          'ant-segmented-item-selected': i === selectedIndex,
-          'ant-segmented-item-disabled': !!nzDisabled || item.disabled
-        }"
-      >
-        <input class="ant-segmented-item-input" type="radio" [checked]="i === selectedIndex" />
-        <div class="ant-segmented-item-label" (click)="!item.disabled && handleOptionClick(i)">
-          <ng-container *ngIf="item.icon; else else_template">
-            <span class="ant-segmented-item-icon"><span nz-icon [nzType]="item.icon"></span></span>
-            <span>
+      @if (animationState) {
+        <div
+          [ngClass]="{ 'ant-segmented-thumb': true, 'ant-segmented-thumb-motion': true }"
+          [@thumbMotion]="animationState"
+          (@thumbMotion.done)="handleThumbAnimationDone($event)"
+        ></div>
+      }
+
+      @for (item of normalizedOptions; track item; let i = $index) {
+        <label
+          #itemLabels
+          [ngClass]="{
+            'ant-segmented-item': true,
+            'ant-segmented-item-selected': i === selectedIndex,
+            'ant-segmented-item-disabled': !!nzDisabled || item.disabled
+          }"
+        >
+          <input class="ant-segmented-item-input" type="radio" [checked]="i === selectedIndex" />
+          <div class="ant-segmented-item-label" (click)="!item.disabled && handleOptionClick(i)">
+            @if (item.icon) {
+              <span class="ant-segmented-item-icon"><span nz-icon [nzType]="item.icon"></span></span>
+              <span>
+                <ng-container
+                  *nzStringTemplateOutlet="item.useTemplate && nzLabelTemplate; context: { $implicit: item, index: i }"
+                >
+                  {{ item.label }}
+                </ng-container>
+              </span>
+            } @else {
               <ng-container
                 *nzStringTemplateOutlet="item.useTemplate && nzLabelTemplate; context: { $implicit: item, index: i }"
               >
                 {{ item.label }}
               </ng-container>
-            </span>
-          </ng-container>
-          <ng-template #else_template>
-            <ng-container
-              *nzStringTemplateOutlet="item.useTemplate && nzLabelTemplate; context: { $implicit: item, index: i }"
-            >
-              {{ item.label }}
-            </ng-container>
-          </ng-template>
-        </div>
-      </label>
+            }
+          </div>
+        </label>
+      }
     </div>
   `,
   host: {
@@ -93,7 +95,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'segmented';
   },
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzSegmentedComponent), multi: true }],
   animations: [thumbMotion],
-  imports: [NgIf, NgClass, NgForOf, NzIconModule, NzOutletModule],
+  imports: [NgClass, NzIconModule, NzOutletModule],
   standalone: true
 })
 export class NzSegmentedComponent implements OnChanges, ControlValueAccessor {