refactor(module:menu): refactor control flow component (#8390)

NG-ZORRO · Feb 8, 2024 · 23ae744 · 23ae744
1 parent e53000e
commit 23ae744
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 78 deletions.
diff --git a/components/menu/demo/recursive.ts b/components/menu/demo/recursive.ts
@@ -6,31 +6,34 @@ import { Component } from '@angular/core';
     <ul nz-menu nzMode="inline" style="width: 240px;">
       <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
       <ng-template #menuTpl let-menus>
-        <ng-container *ngFor="let menu of menus">
-          <li
-            *ngIf="!menu.children"
-            nz-menu-item
-            [nzPaddingLeft]="menu.level * 24"
-            [nzDisabled]="menu.disabled"
-            [nzSelected]="menu.selected"
-          >
-            <span nz-icon [nzType]="menu.icon" *ngIf="menu.icon"></span>
-            <span>{{ menu.title }}</span>
-          </li>
-          <li
-            *ngIf="menu.children"
-            nz-submenu
-            [nzPaddingLeft]="menu.level * 24"
-            [nzOpen]="menu.open"
-            [nzTitle]="menu.title"
-            [nzIcon]="menu.icon"
-            [nzDisabled]="menu.disabled"
-          >
-            <ul>
-              <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }"></ng-container>
-            </ul>
-          </li>
-        </ng-container>
+        @for (menu of menus; track menu) {
+          @if (!menu.children) {
+            <li
+              nz-menu-item
+              [nzPaddingLeft]="menu.level * 24"
+              [nzDisabled]="menu.disabled"
+              [nzSelected]="menu.selected"
+            >
+              @if (menu.icon) {
+                <span nz-icon [nzType]="menu.icon"></span>
+              }
+              <span>{{ menu.title }}</span>
+            </li>
+          } @else {
+            <li
+              nz-submenu
+              [nzPaddingLeft]="menu.level * 24"
+              [nzOpen]="menu.open"
+              [nzTitle]="menu.title"
+              [nzIcon]="menu.icon"
+              [nzDisabled]="menu.disabled"
+            >
+              <ul>
+                <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }" />
+              </ul>
+            </li>
+          }
+        }
       </ng-template>
     </ul>
   `

diff --git a/components/menu/menu-group.component.ts b/components/menu/menu-group.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 {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -45,12 +44,14 @@ export function MenuGroupFactory(): boolean {
       #titleElement
     >
       <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
-      <ng-content select="[title]" *ngIf="!nzTitle"></ng-content>
+      @if (!nzTitle) {
+        <ng-content select="[title]" />
+      }
     </div>
     <ng-content></ng-content>
   `,
   preserveWhitespaces: false,
-  imports: [NzOutletModule, NgIf],
+  imports: [NzOutletModule],
   standalone: true
 })
 export class NzMenuGroupComponent implements AfterViewInit {

diff --git a/components/menu/menu.spec.ts b/components/menu/menu.spec.ts
@@ -613,20 +613,26 @@ export class NzTestMenuInlineComponent {
 @Component({
   template: `
     <ul nz-menu [nzMode]="'inline'" style="width: 240px;">
-      <li *ngFor="let l1 of menus" nz-submenu>
-        <span title>
-          <span nz-icon nzType="appstore"></span>
-          {{ l1.text }}
-        </span>
-        <ul>
-          <li *ngFor="let l2 of l1.children" nz-submenu>
-            <span title>{{ l2.text }}</span>
-            <ul>
-              <li *ngFor="let l3 of l2.children" nz-menu-item>{{ l3.text }}</li>
-            </ul>
-          </li>
-        </ul>
-      </li>
+      @for (l1 of menus; track l1) {
+        <li nz-submenu>
+          <span title>
+            <span nz-icon nzType="appstore"></span>
+            {{ l1.text }}
+          </span>
+          <ul>
+            @for (l2 of l1.children; track l2) {
+              <li nz-submenu>
+                <span title>{{ l2.text }}</span>
+                <ul>
+                  @for (l3 of l2.children; track l3) {
+                    <li nz-menu-item>{{ l3.text }}</li>
+                  }
+                </ul>
+              </li>
+            }
+          </ul>
+        </li>
+      }
     </ul>
   `
 })
@@ -745,12 +751,14 @@ export class NzTestBasicMenuInlineComponent {}
 @Component({
   template: `
     <ul nz-menu nzMode="horizontal">
-      <li *ngIf="display" nz-submenu>
-        <span title>{{ text }}</span>
-        <ul>
-          <li nz-menu-item>item</li>
-        </ul>
-      </li>
+      @if (display) {
+        <li nz-submenu>
+          <span title>{{ text }}</span>
+          <ul>
+            <li nz-menu-item>item</li>
+          </ul>
+        </li>
+      }
     </ul>
   `
 })

diff --git a/components/menu/submenu-title.component.ts b/components/menu/submenu-title.component.ts
@@ -4,7 +4,6 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -32,22 +31,27 @@ import { NzMenuModeType } from './menu.types';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <span nz-icon [nzType]="nzIcon" *ngIf="nzIcon"></span>
+    @if (nzIcon) {
+      <span nz-icon [nzType]="nzIcon"></span>
+    }
     <ng-container *nzStringTemplateOutlet="nzTitle">
       <span class="ant-menu-title-content">{{ nzTitle }}</span>
     </ng-container>
-    <ng-content></ng-content>
-    <span
-      [ngSwitch]="dir"
-      *ngIf="isMenuInsideDropDown; else notDropdownTpl"
-      class="ant-dropdown-menu-submenu-expand-icon"
-    >
-      <span *ngSwitchCase="'rtl'" nz-icon nzType="left" class="ant-dropdown-menu-submenu-arrow-icon"></span>
-      <span *ngSwitchDefault nz-icon nzType="right" class="ant-dropdown-menu-submenu-arrow-icon"></span>
-    </span>
-    <ng-template #notDropdownTpl>
+    <ng-content />
+    @if (isMenuInsideDropDown) {
+      <span class="ant-dropdown-menu-submenu-expand-icon">
+        @switch (dir) {
+          @case ('rtl') {
+            <span nz-icon nzType="left" class="ant-dropdown-menu-submenu-arrow-icon"></span>
+          }
+          @default {
+            <span nz-icon nzType="right" class="ant-dropdown-menu-submenu-arrow-icon"></span>
+          }
+        }
+      </span>
+    } @else {
       <span class="ant-menu-submenu-arrow"></span>
-    </ng-template>
+    }
   `,
   host: {
     '[class.ant-dropdown-menu-submenu-title]': 'isMenuInsideDropDown',
@@ -58,7 +62,7 @@ import { NzMenuModeType } from './menu.types';
     '(mouseenter)': 'setMouseState(true)',
     '(mouseleave)': 'setMouseState(false)'
   },
-  imports: [NzIconModule, NgIf, NzOutletModule, NgSwitch, NgSwitchCase, NgSwitchDefault],
+  imports: [NzIconModule, NzOutletModule],
   standalone: true
 })
 export class NzSubMenuTitleComponent implements OnDestroy, OnInit {

diff --git a/components/menu/submenu.component.ts b/components/menu/submenu.component.ts
@@ -6,7 +6,6 @@
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { CdkOverlayOrigin, ConnectedOverlayPositionChange, OverlayModule } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
-import { NgIf } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -83,19 +82,21 @@ const listOfHorizontalPositions = [
       (subMenuMouseState)="setMouseEnterState($event)"
       (toggleSubMenu)="toggleSubMenu()"
     >
-      <ng-content select="[title]" *ngIf="!nzTitle"></ng-content>
+      @if (!nzTitle) {
+        <ng-content select="[title]" />
+      }
     </div>
-    <div
-      *ngIf="mode === 'inline'; else nonInlineTemplate"
-      nz-submenu-inline-child
-      [mode]="mode"
-      [nzOpen]="nzOpen"
-      [@.disabled]="!!noAnimation?.nzNoAnimation"
-      [nzNoAnimation]="noAnimation?.nzNoAnimation"
-      [menuClass]="nzMenuClassName"
-      [templateOutlet]="subMenuTemplate"
-    ></div>
-    <ng-template #nonInlineTemplate>
+    @if (mode === 'inline') {
+      <div
+        nz-submenu-inline-child
+        [mode]="mode"
+        [nzOpen]="nzOpen"
+        [@.disabled]="!!noAnimation?.nzNoAnimation"
+        [nzNoAnimation]="noAnimation?.nzNoAnimation"
+        [menuClass]="nzMenuClassName"
+        [templateOutlet]="subMenuTemplate"
+      ></div>
+    } @else {
       <ng-template
         cdkConnectedOverlay
         (positionChange)="onPositionChange($event)"
@@ -120,10 +121,10 @@ const listOfHorizontalPositions = [
           (subMenuMouseState)="setMouseEnterState($event)"
         ></div>
       </ng-template>
-    </ng-template>
+    }
 
     <ng-template #subMenuTemplate>
-      <ng-content></ng-content>
+      <ng-content />
     </ng-template>
   `,
   host: {
@@ -148,7 +149,6 @@ const listOfHorizontalPositions = [
   imports: [
     NzSubMenuTitleComponent,
     NzSubmenuInlineChildComponent,
-    NgIf,
     NzNoAnimationDirective,
     NzSubmenuNoneInlineChildComponent,
     OverlayModule