refactor(module:comment): refactor control flow (#8315)

NG-ZORRO · Jan 2, 2024 · 1368435 · 1368435
1 parent 8c0dd00
commit 1368435
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 32 deletions.
diff --git a/components/comment/comment-cells.ts b/components/comment/comment-cells.ts
@@ -64,7 +64,7 @@ export class NzCommentActionHostDirective extends CdkPortalOutlet implements OnI
   exportAs: 'nzCommentAction',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-template><ng-content></ng-content></ng-template>',
+  template: '<ng-template><ng-content /></ng-template>',
   standalone: true
 })
 export class NzCommentActionComponent implements OnInit {

diff --git a/components/comment/comment.component.ts b/components/comment/comment.component.ts
@@ -35,23 +35,31 @@ import { NzCommentActionComponent as CommentAction, NzCommentActionHostDirective
       </div>
       <div class="ant-comment-content">
         <div class="ant-comment-content-author">
-          <span *ngIf="nzAuthor" class="ant-comment-content-author-name">
-            <ng-container *nzStringTemplateOutlet="nzAuthor">{{ nzAuthor }}</ng-container>
-          </span>
-          <span *ngIf="nzDatetime" class="ant-comment-content-author-time">
-            <ng-container *nzStringTemplateOutlet="nzDatetime">{{ nzDatetime }}</ng-container>
-          </span>
+          @if (nzAuthor) {
+            <span class="ant-comment-content-author-name">
+              <ng-container *nzStringTemplateOutlet="nzAuthor">{{ nzAuthor }}</ng-container>
+            </span>
+          }
+          @if (nzDatetime) {
+            <span class="ant-comment-content-author-time">
+              <ng-container *nzStringTemplateOutlet="nzDatetime">{{ nzDatetime }}</ng-container>
+            </span>
+          }
         </div>
-        <ng-content select="nz-comment-content"></ng-content>
-        <ul class="ant-comment-actions" *ngIf="actions?.length">
-          <li *ngFor="let action of actions">
-            <span><ng-template [nzCommentActionHost]="action.content"></ng-template></span>
-          </li>
-        </ul>
+        <ng-content select="nz-comment-content" />
+        @if (actions?.length) {
+          <ul class="ant-comment-actions">
+            @for (action of actions; track action) {
+              <li>
+                <span><ng-template [nzCommentActionHost]="action.content" /></span>
+              </li>
+            }
+          </ul>
+        }
       </div>
     </div>
     <div class="ant-comment-nested">
-      <ng-content></ng-content>
+      <ng-content />
     </div>
   `,
   encapsulation: ViewEncapsulation.None,

diff --git a/components/comment/demo/editor.ts b/components/comment/demo/editor.ts
@@ -5,16 +5,19 @@ import { formatDistance } from 'date-fns';
 @Component({
   selector: 'nz-demo-comment-editor',
   template: `
-    <nz-list *ngIf="data.length" [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
-      <ng-template #item let-item>
-        <nz-comment [nzAuthor]="item.author" [nzDatetime]="item.displayTime">
-          <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="item.avatar"></nz-avatar>
-          <nz-comment-content>
-            <p>{{ item.content }}</p>
-          </nz-comment-content>
-        </nz-comment>
-      </ng-template>
-    </nz-list>
+    @if (data.length) {
+      <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
+        <ng-template #item let-item>
+          <nz-comment [nzAuthor]="item.author" [nzDatetime]="item.displayTime">
+            <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="item.avatar"></nz-avatar>
+            <nz-comment-content>
+              <p>{{ item.content }}</p>
+            </nz-comment-content>
+          </nz-comment>
+        </ng-template>
+      </nz-list>
+    }
+
     <nz-comment>
       <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="user.avatar"></nz-avatar>
       <nz-comment-content>

diff --git a/components/comment/demo/nested.ts b/components/comment/demo/nested.ts
@@ -10,14 +10,11 @@ import { Component } from '@angular/core';
           <p>{{ comment.content }}</p>
         </nz-comment-content>
         <nz-comment-action>Reply to</nz-comment-action>
-        <ng-container *ngIf="comment.children && comment.children.length">
-          <ng-template ngFor let-child [ngForOf]="comment.children">
-            <ng-template
-              [ngTemplateOutlet]="commentTemplateRef"
-              [ngTemplateOutletContext]="{ comment: child }"
-            ></ng-template>
-          </ng-template>
-        </ng-container>
+        @if (comment.children && comment.children.length) {
+          @for (child of comment.children; track child) {
+            <ng-template [ngTemplateOutlet]="commentTemplateRef" [ngTemplateOutletContext]="{ comment: child }" />
+          }
+        }
       </nz-comment>
     </ng-template>