refactor(module:typography): migrate to new control flow (NG-ZORRO#8689)

Laffery · Aug 9, 2024 · 8bf5294 · 8bf5294
1 parent ad46801
commit 8bf5294
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 48 deletions.
diff --git a/components/typography/text-edit.component.ts b/components/typography/text-edit.component.ts
@@ -4,7 +4,6 @@
  */
 
 import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
-import { NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -21,7 +20,7 @@ import {
   afterNextRender,
   inject
 } from '@angular/core';
-import { BehaviorSubject, EMPTY, fromEvent, Observable } from 'rxjs';
+import { BehaviorSubject, EMPTY, Observable, fromEvent } from 'rxjs';
 import { first, switchMap, takeUntil } from 'rxjs/operators';
 
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
@@ -37,14 +36,12 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
   selector: 'nz-text-edit',
   exportAs: 'nzTextEdit',
   template: `
-    <ng-template [ngIf]="editing" [ngIfElse]="notEditing">
+    @if (editing) {
       <textarea #textarea nz-input nzAutosize (blur)="confirm()"></textarea>
       <button nz-trans-button class="ant-typography-edit-content-confirm" (click)="confirm()">
         <span nz-icon nzType="enter"></span>
       </button>
-    </ng-template>
-
-    <ng-template #notEditing>
+    } @else {
       <button
         nz-tooltip
         nz-trans-button
@@ -56,13 +53,13 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
           <span nz-icon [nzType]="icon"></span>
         </ng-container>
       </button>
-    </ng-template>
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   providers: [NzDestroyService],
-  imports: [NgIf, NzInputModule, NzTransButtonModule, NzIconModule, NzToolTipModule, NzOutletModule],
+  imports: [NzInputModule, NzTransButtonModule, NzIconModule, NzToolTipModule, NzOutletModule],
   standalone: true
 })
 export class NzTextEditComponent implements OnInit {

diff --git a/components/typography/typography.component.ts b/components/typography/typography.component.ts
@@ -5,7 +5,7 @@
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { Platform } from '@angular/cdk/platform';
-import { DOCUMENT, NgIf, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -56,51 +56,59 @@ const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
   exportAs: 'nzTypography',
   template: `
     <ng-template #contentTemplate let-content="content">
-      <ng-content *ngIf="!content"></ng-content>
+      @if (!content) {
+        <ng-content></ng-content>
+      }
       {{ content }}
     </ng-template>
-    <ng-container *ngIf="!editing">
-      <ng-container
-        *ngIf="
-          expanded ||
-            (!hasOperationsWithEllipsis && nzEllipsisRows === 1 && !hasEllipsisObservers) ||
-            canCssEllipsis ||
-            (nzSuffix && expanded);
-          else jsEllipsis
-        "
-      >
+    @if (!editing) {
+      @if (
+        expanded ||
+        (!hasOperationsWithEllipsis && nzEllipsisRows === 1 && !hasEllipsisObservers) ||
+        canCssEllipsis ||
+        (nzSuffix && expanded)
+      ) {
         <ng-template
           [ngTemplateOutlet]="contentTemplate"
           [ngTemplateOutletContext]="{ content: nzContent }"
         ></ng-template>
-        <ng-container *ngIf="nzSuffix">{{ nzSuffix }}</ng-container>
-      </ng-container>
-      <ng-template #jsEllipsis>
+        @if (nzSuffix) {
+          {{ nzSuffix }}
+        }
+      } @else {
         <span #ellipsisContainer></span>
-        <ng-container *ngIf="isEllipsis">{{ ellipsisStr }}</ng-container>
-        <ng-container *ngIf="nzSuffix">{{ nzSuffix }}</ng-container>
-        <a #expandable *ngIf="nzExpandable && isEllipsis" class="ant-typography-expand" (click)="onExpand()">
-          {{ locale?.expand }}
-        </a>
-      </ng-template>
-    </ng-container>
-
-    <nz-text-edit
-      *ngIf="nzEditable"
-      [text]="nzContent"
-      [icon]="nzEditIcon"
-      [tooltip]="nzEditTooltip"
-      (endEditing)="onEndEditing($event)"
-      (startEditing)="onStartEditing()"
-    ></nz-text-edit>
-
-    <nz-text-copy
-      *ngIf="nzCopyable && !editing"
-      [text]="copyText"
-      [tooltips]="nzCopyTooltips"
-      [icons]="nzCopyIcons"
-      (textCopy)="onTextCopy($event)"
-    ></nz-text-copy>
+        @if (isEllipsis) {
+          {{ ellipsisStr }}
+        }
+        @if (nzSuffix) {
+          {{ nzSuffix }}
+        }
+        @if (nzExpandable && isEllipsis) {
+          <a #expandable class="ant-typography-expand" (click)="onExpand()">
+            {{ locale?.expand }}
+          </a>
+        }
+      }
+    }
+
+    @if (nzEditable) {
+      <nz-text-edit
+        [text]="nzContent"
+        [icon]="nzEditIcon"
+        [tooltip]="nzEditTooltip"
+        (endEditing)="onEndEditing($event)"
+        (startEditing)="onStartEditing()"
+      ></nz-text-edit>
+    }
+
+    @if (nzCopyable && !editing) {
+      <nz-text-copy
+        [text]="copyText"
+        [tooltips]="nzCopyTooltips"
+        [icons]="nzCopyIcons"
+        (textCopy)="onTextCopy($event)"
+      ></nz-text-copy>
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -120,7 +128,7 @@ const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
     '[class.ant-typography-ellipsis-multiple-line]': 'canCssEllipsis && nzEllipsisRows > 1',
     '[style.-webkit-line-clamp]': '(canCssEllipsis && nzEllipsisRows > 1) ? nzEllipsisRows : null'
   },
-  imports: [NgIf, NgTemplateOutlet, NzTextEditComponent, NzTextCopyComponent],
+  imports: [NgTemplateOutlet, NzTextEditComponent, NzTextCopyComponent],
   standalone: true
 })
 export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {