refactor(module:graph): refactor control flow component (#8343)

NG-ZORRO · Jan 10, 2024 · a95195f · a95195f
1 parent 1a080a0
commit a95195f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 49 deletions.
diff --git a/components/graph/graph-edge.component.ts b/components/graph/graph-edge.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -25,20 +25,21 @@ import { NzGraphEdge, NzGraphEdgeType } from './interface';
 @Component({
   selector: '[nz-graph-edge]',
   template: `
-    <ng-container
-      *ngIf="customTemplate"
-      [ngTemplateOutlet]="customTemplate"
-      [ngTemplateOutletContext]="{ $implicit: edge }"
-    ></ng-container>
-    <svg:g *ngIf="!customTemplate">
-      <path class="nz-graph-edge-line" [attr.marker-end]="'url(#edge-end-arrow)'"></path>
-      <svg:text class="nz-graph-edge-text" text-anchor="middle" dy="10" *ngIf="edge.label">
-        <textPath [attr.href]="'#' + id" startOffset="50%">{{ edge.label }}</textPath>
-      </svg:text>
-    </svg:g>
+    @if (customTemplate) {
+      <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: edge }" />
+    } @else {
+      <svg:g>
+        <path class="nz-graph-edge-line" [attr.marker-end]="'url(#edge-end-arrow)'"></path>
+        @if (edge.label) {
+          <svg:text class="nz-graph-edge-text" text-anchor="middle" dy="10">
+            <textPath [attr.href]="'#' + id" startOffset="50%">{{ edge.label }}</textPath>
+          </svg:text>
+        }
+      </svg:g>
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, NgTemplateOutlet],
+  imports: [NgTemplateOutlet],
   standalone: true
 })
 export class NzGraphEdgeComponent implements OnInit, OnChanges {

diff --git a/components/graph/graph-node.component.ts b/components/graph/graph-node.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { animate, AnimationBuilder, AnimationFactory, AnimationPlayer, group, query, style } from '@angular/animations';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -34,15 +34,12 @@ interface Info {
   selector: '[nz-graph-node]',
   template: `
     <svg:g>
-      <ng-container
-        *ngIf="customTemplate"
-        [ngTemplateOutlet]="customTemplate"
-        [ngTemplateOutletContext]="{ $implicit: node }"
-      ></ng-container>
-      <ng-container *ngIf="!customTemplate">
+      @if (customTemplate) {
+        <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: node }" />
+      } @else {
         <svg:rect class="nz-graph-node-rect" [attr.width]="node.width" [attr.height]="node.height"></svg:rect>
         <svg:text x="10" y="20">{{ node.id || node.name }}</svg:text>
-      </ng-container>
+      }
     </svg:g>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -52,7 +49,7 @@ interface Info {
     '[class.nz-graph-group-node]': 'node.type===0',
     '[class.nz-graph-base-node]': 'node.type===1'
   },
-  imports: [NgIf, NgTemplateOutlet],
+  imports: [NgTemplateOutlet],
   standalone: true
 })
 export class NzGraphNodeComponent implements OnInit, OnDestroy {

diff --git a/components/graph/graph.component.ts b/components/graph/graph.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   AfterContentChecked,
   ChangeDetectionStrategy,
@@ -25,7 +25,7 @@ import {
   ViewChildren,
   ViewEncapsulation
 } from '@angular/core';
-import { Observable, ReplaySubject, Subject, Subscription, forkJoin } from 'rxjs';
+import { forkJoin, Observable, ReplaySubject, Subject, Subscription } from 'rxjs';
 import { finalize, take, takeUntil } from 'rxjs/operators';
 
 import { buildGraph } from 'dagre-compound';
@@ -89,39 +89,34 @@ export function isDataSource(value: NzSafeAny): value is NzGraphData {
       <svg:g [attr.transform]="type === 'sub' ? subGraphTransform(renderNode) : null">
         <svg:g class="core" [attr.transform]="coreTransform(renderNode)">
           <svg:g class="nz-graph-edges">
-            <ng-container *ngFor="let edge of $asNzGraphEdges(renderNode.edges); trackBy: edgeTrackByFun">
+            @for (edge of $asNzGraphEdges(renderNode.edges); track edgeTrackByFun) {
               <g
                 class="nz-graph-edge"
                 nz-graph-edge
                 [edge]="edge"
                 [edgeType]="nzGraphLayoutConfig?.defaultEdge?.type"
                 [customTemplate]="customGraphEdgeTemplate"
               ></g>
-            </ng-container>
+            }
           </svg:g>
 
           <svg:g class="nz-graph-nodes">
-            <ng-container *ngFor="let node of typedNodes(renderNode.nodes); trackBy: nodeTrackByFun">
-              <g
-                *ngIf="node.type === 1"
-                class="nz-graph-node"
-                nz-graph-node
-                [node]="node"
-                [customTemplate]="nodeTemplate"
-              ></g>
-              <g
-                *ngIf="node.type === 0"
-                class="nz-graph-node"
-                nz-graph-node
-                [node]="node"
-                [customTemplate]="groupNodeTemplate"
-              ></g>
-              <ng-container
-                *ngIf="node.expanded"
-                [ngTemplateOutlet]="groupTemplate"
-                [ngTemplateOutletContext]="{ renderNode: node, type: 'sub' }"
-              ></ng-container>
-            </ng-container>
+            @for (node of typedNodes(renderNode.nodes); track node.name) {
+              @if (node.type === 1) {
+                <g class="nz-graph-node" nz-graph-node [node]="node" [customTemplate]="nodeTemplate"></g>
+              }
+
+              @if (node.type === 0) {
+                <g class="nz-graph-node" nz-graph-node [node]="node" [customTemplate]="groupNodeTemplate"></g>
+              }
+
+              @if (node.expanded) {
+                <ng-container
+                  [ngTemplateOutlet]="groupTemplate"
+                  [ngTemplateOutletContext]="{ renderNode: node, type: 'sub' }"
+                />
+              }
+            }
           </svg:g>
         </svg:g>
       </svg:g>
@@ -131,7 +126,7 @@ export function isDataSource(value: NzSafeAny): value is NzGraphData {
     '[class.nz-graph]': 'true',
     '[class.nz-graph-auto-size]': 'nzAutoSize'
   },
-  imports: [NgTemplateOutlet, NgForOf, NzGraphEdgeComponent, NzGraphNodeComponent, NgIf],
+  imports: [NgTemplateOutlet, NzGraphEdgeComponent, NzGraphNodeComponent],
   standalone: true
 })
 export class NzGraphComponent implements OnInit, OnChanges, AfterContentChecked, OnDestroy, NzGraph {
@@ -177,7 +172,6 @@ export class NzGraphComponent implements OnInit, OnChanges, AfterContentChecked,
   private _dataSubscription?: Subscription | null;
   private destroy$ = new Subject<void>();
 
-  nodeTrackByFun = (_: number, node: NzGraphNode | NzGraphGroupNode): string => node.name;
   edgeTrackByFun = (_: number, edge: NzGraphEdge): string => `${edge.v}-${edge.w}`;
 
   subGraphTransform = (node: NzGraphGroupNode): string => {