refactor(module:layout): refactor control flow component (#8366)

NG-ZORRO · Feb 1, 2024 · 535efe4 · 535efe4
1 parent c9bc55c
commit 535efe4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/components/layout/sider-trigger.component.ts b/components/layout/sider-trigger.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,
   Component,
@@ -24,15 +24,19 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <ng-container *ngIf="isZeroTrigger">
-      <ng-template [ngTemplateOutlet]="nzZeroTrigger || defaultZeroTrigger"></ng-template>
-    </ng-container>
-    <ng-container *ngIf="isNormalTrigger">
-      <ng-template [ngTemplateOutlet]="nzTrigger || defaultTrigger"></ng-template>
-    </ng-container>
+    @if (isZeroTrigger) {
+      <ng-template [ngTemplateOutlet]="nzZeroTrigger || defaultZeroTrigger" />
+    }
+
+    @if (isNormalTrigger) {
+      <ng-template [ngTemplateOutlet]="nzTrigger || defaultTrigger" />
+    }
     <ng-template #defaultTrigger>
-      <span nz-icon [nzType]="nzCollapsed ? 'right' : 'left'" *ngIf="!nzReverseArrow"></span>
-      <span nz-icon [nzType]="nzCollapsed ? 'left' : 'right'" *ngIf="nzReverseArrow"></span>
+      @if (nzReverseArrow) {
+        <span nz-icon [nzType]="nzCollapsed ? 'left' : 'right'"></span>
+      } @else {
+        <span nz-icon [nzType]="nzCollapsed ? 'right' : 'left'"></span>
+      }
     </ng-template>
     <ng-template #defaultZeroTrigger>
       <span nz-icon nzType="bars"></span>
@@ -45,7 +49,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     '[class.ant-layout-sider-zero-width-trigger-right]': 'isZeroTrigger && nzReverseArrow',
     '[class.ant-layout-sider-zero-width-trigger-left]': 'isZeroTrigger && !nzReverseArrow'
   },
-  imports: [NgIf, NgTemplateOutlet, NzIconModule],
+  imports: [NgTemplateOutlet, NzIconModule],
   standalone: true
 })
 export class NzSiderTriggerComponent implements OnChanges, OnInit {

diff --git a/components/layout/sider.component.ts b/components/layout/sider.component.ts
@@ -4,7 +4,6 @@
  */
 
 import { Platform } from '@angular/cdk/platform';
-import { NgIf } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -26,7 +25,7 @@ import { takeUntil } from 'rxjs/operators';
 
 import { NzBreakpointKey, NzBreakpointService, siderResponsiveMap } from 'ng-zorro-antd/core/services';
 import { BooleanInput } from 'ng-zorro-antd/core/types';
-import { InputBoolean, inNextTick, toCssPixel } from 'ng-zorro-antd/core/util';
+import { inNextTick, InputBoolean, toCssPixel } from 'ng-zorro-antd/core/util';
 import { NzMenuDirective } from 'ng-zorro-antd/menu';
 
 import { NzSiderTriggerComponent } from './sider-trigger.component';
@@ -41,19 +40,20 @@ import { NzSiderTriggerComponent } from './sider-trigger.component';
     <div class="ant-layout-sider-children">
       <ng-content></ng-content>
     </div>
-    <div
-      *ngIf="nzCollapsible && nzTrigger !== null"
-      nz-sider-trigger
-      [matchBreakPoint]="matchBreakPoint"
-      [nzCollapsedWidth]="nzCollapsedWidth"
-      [nzCollapsed]="nzCollapsed"
-      [nzBreakpoint]="nzBreakpoint"
-      [nzReverseArrow]="nzReverseArrow"
-      [nzTrigger]="nzTrigger"
-      [nzZeroTrigger]="nzZeroTrigger"
-      [siderWidth]="widthSetting"
-      (click)="setCollapsed(!nzCollapsed)"
-    ></div>
+    @if (nzCollapsible && nzTrigger !== null) {
+      <div
+        nz-sider-trigger
+        [matchBreakPoint]="matchBreakPoint"
+        [nzCollapsedWidth]="nzCollapsedWidth"
+        [nzCollapsed]="nzCollapsed"
+        [nzBreakpoint]="nzBreakpoint"
+        [nzReverseArrow]="nzReverseArrow"
+        [nzTrigger]="nzTrigger"
+        [nzZeroTrigger]="nzZeroTrigger"
+        [siderWidth]="widthSetting"
+        (click)="setCollapsed(!nzCollapsed)"
+      ></div>
+    }
   `,
   host: {
     class: 'ant-layout-sider',
@@ -67,7 +67,7 @@ import { NzSiderTriggerComponent } from './sider-trigger.component';
     '[style.minWidth]': 'widthSetting',
     '[style.width]': 'widthSetting'
   },
-  imports: [NgIf, NzSiderTriggerComponent],
+  imports: [NzSiderTriggerComponent],
   standalone: true
 })
 export class NzSiderComponent implements OnInit, OnDestroy, OnChanges, AfterContentInit {