refactor: refactor all control-flow directives to new control-flow TINFR-381 （ 等 build 到子应用中测试没问题再 review ）

cdk/behaviors/examples/async/async.component.html

@@ -4,8 +4,12 @@
 </button>
 <thy-loading [thyDone]="todosFetcher.loadingDone()"></thy-loading>
 
-<thy-list *ngIf="todosFetcher.loadingDone()">
- <thy-list-item *ngFor="let todo of todos">
- {{ todo.title }}
- </thy-list-item>
-</thy-list>
+@if (todosFetcher.loadingDone()) {
+ <thy-list>
+ @for (todo of todos; track todo.id) {
+ <thy-list-item>
+ {{ todo.title }}
+ </thy-list-item>
+ }
+ </thy-list>
+}

src/action/action.component.html

@@ -1,4 +1,10 @@
-<thy-icon *ngIf="icon && !feedback" [thyIconName]="icon"></thy-icon>
-<thy-icon *ngIf="feedbackOptions?.icon" [class]="feedbackOptions.class" [thyIconName]="feedbackOptions.icon"></thy-icon>
-<thy-icon class="hover-icon" *ngIf="thyHoverIcon" [thyIconName]="thyHoverIcon"></thy-icon>
+@if (icon && !feedback) {
+ <thy-icon [thyIconName]="icon"></thy-icon>
+}
+@if (feedbackOptions?.icon) {
+ <thy-icon [class]="feedbackOptions.class" [thyIconName]="feedbackOptions.icon"></thy-icon>
+}
+@if (thyHoverIcon) {
+ <thy-icon class="hover-icon" [thyIconName]="thyHoverIcon"></thy-icon>
+}
 <ng-content></ng-content>

src/action/action.component.ts

@@ -13,7 +13,7 @@ import {
 } from '@angular/core';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { ThyIcon } from 'ngx-tethys/icon';
-import { NgIf } from '@angular/common';
+
 import { Subscription, timer } from 'rxjs';
 import { coerceBooleanProperty } from 'ngx-tethys/util';
 
@@ -55,7 +55,7 @@ const defaultFeedbackOptions: Record<ThyActionFeedback, ThyActionFeedbackOptions
  '[class.disabled]': 'thyDisabled'
  },
  standalone: true,
- imports: [NgIf, ThyIcon]
+ imports: [ThyIcon]
 })
 export class ThyAction implements OnInit, AfterViewInit, OnChanges, OnDestroy {
  icon: string;

src/action/test/actions.spec.ts

@@ -11,7 +11,9 @@ import { ThyActions } from '../actions.component';
  <thy-actions [thySize]="size">
  <a thyAction thyIcon="inbox"></a>
  <a thyAction thyIcon="search"></a>
- <a thyAction *ngIf="dynamicAdded" thyIcon="inbox"></a>
+ @if (dynamicAdded) {
+ <a thyAction thyIcon="inbox"></a>
+ }
  </thy-actions>
  `
 })

src/alert/alert.component.html

@@ -1,14 +1,24 @@
 <div class="thy-alert-content">
- <thy-icon *ngIf="thyIcon" class="thy-alert-icon" [thyIconName]="thyIcon"></thy-icon>
- <span *ngIf="theme === 'naked'" class="thy-alert-tips">Tips： </span>
- <ng-container *ngIf="messageTemplate">
+ @if (thyIcon) {
+ <thy-icon class="thy-alert-icon" [thyIconName]="thyIcon"></thy-icon>
+ }
+ @if (theme === 'naked') {
+ <span class="thy-alert-tips">Tips： </span>
+ }
+ @if (messageTemplate) {
  <ng-template *ngTemplateOutlet="messageTemplate"></ng-template>
- </ng-container>
- <span *ngIf="messageText">{{ messageText }}</span>
- <div class="thy-alert-operation" *ngIf="alertOperation">
- <ng-container [ngTemplateOutlet]="alertOperation"></ng-container>
- </div>
+ }
+ @if (messageText) {
+ <span>{{ messageText }}</span>
+ }
+ @if (alertOperation) {
+ <div class="thy-alert-operation">
+ <ng-container [ngTemplateOutlet]="alertOperation"></ng-container>
+ </div>
+ }
 </div>
-<a href="javascript:;" class="thy-alert-close" *ngIf="thyCloseable" (click)="closeAlert()">
- <thy-icon thyIconName="close"></thy-icon>
-</a>
+@if (thyCloseable) {
+ <a href="javascript:;" class="thy-alert-close" (click)="closeAlert()">
+ <thy-icon thyIconName="close"></thy-icon>
+ </a>
+}

src/alert/alert.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit, ContentChild, TemplateRef, OnChanges, ChangeD
 import { coerceBooleanProperty, isString } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { ThyIcon } from 'ngx-tethys/icon';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 
 const weakTypes = ['primary-weak', 'success-weak', 'warning-weak', 'danger-weak'];
 
@@ -45,7 +45,7 @@ const typeIconsMap: Record<string, string> = {
  '[class.thy-alert-hidden]': 'hidden'
  },
  standalone: true,
- imports: [NgIf, ThyIcon, NgTemplateOutlet]
+ imports: [ThyIcon, NgTemplateOutlet]
 })
 export class ThyAlert implements OnInit, OnChanges {
  private hidden = false;

src/anchor/anchor-link.component.ts

@@ -14,7 +14,7 @@ import {
 import { useHostRenderer } from '@tethys/cdk/dom';
 
 import { ThyAnchor } from './anchor.component';
-import { NgIf } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 
 /**
  * 锚点链接组件，可供锚点跳转
@@ -26,14 +26,18 @@ import { NgIf } from '@angular/common';
  preserveWhitespaces: false,
  template: `
  <a #linkTitle (click)="goToClick($event)" href="{{ thyHref }}" class="thy-anchor-link-title" title="{{ title }}">
- <span *ngIf="title; else titleTemplate || thyTemplate">{{ title }}</span>
+ @if (title) {
+ <span>{{ title }}</span>
+ } @else {
+ <ng-template [ngTemplateOutlet]="titleTemplate || thyTemplate"></ng-template>
+ }
  </a>
  <ng-content></ng-content>
  `,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
- imports: [NgIf]
+ imports: [NgTemplateOutlet]
 })
 export class ThyAnchorLink implements OnInit, OnDestroy {
  title: string | null = '';

src/anchor/anchor.component.ts

@@ -21,7 +21,7 @@ import {
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, throttleTime } from 'rxjs/operators';
 
-import { DOCUMENT, NgClass, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import { ThyAffix } from 'ngx-tethys/affix';
 import { ThyScrollService } from 'ngx-tethys/core';
 import { coerceBooleanProperty, getOffset } from 'ngx-tethys/util';
@@ -43,9 +43,23 @@ const sharpMatcherRegx = /#([^#]+)$/;
  exportAs: 'thyAnchor',
  preserveWhitespaces: false,
  template: `
- <thy-affix *ngIf="thyAffix; else content" [thyOffsetTop]="thyOffsetTop" [thyContainer]="container">
- <ng-template [ngTemplateOutlet]="content"></ng-template>
- </thy-affix>
+ @if (thyAffix) {
+ <thy-affix [thyOffsetTop]="thyOffsetTop" [thyContainer]="container">
+ <ng-template [ngTemplateOutlet]="content"></ng-template>
+ </thy-affix>
+ } @else {
+ <div
+ class="thy-anchor-wrapper"
+ [ngClass]="{ 'thy-anchor-wrapper-horizontal': thyDirection === 'horizontal' }"
+ [ngStyle]="wrapperStyle">
+ <div class="thy-anchor">
+ <div class="thy-anchor-ink">
+ <div class="thy-anchor-ink-full" #ink></div>
+ </div>
+ <ng-content></ng-content>
+ </div>
+ </div>
+ }
  <ng-template #content>
  <div
  class="thy-anchor-wrapper"
@@ -63,7 +77,7 @@ const sharpMatcherRegx = /#([^#]+)$/;
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
- imports: [NgIf, ThyAffix, NgTemplateOutlet, NgStyle, NgClass]
+ imports: [ThyAffix, NgTemplateOutlet, NgStyle, NgClass]
 })
 export class ThyAnchor implements OnDestroy, AfterViewInit, OnChanges {
  @ViewChild('ink') private ink!: ElementRef;

src/anchor/examples/horizontal/horizontal.component.html

@@ -11,7 +11,11 @@
  }"
  cd>
  <h1 id="basic">Basic</h1>
- <p *ngFor="let item of demos">this is a basic</p>
+ @for (item of demos; track $index) {
+ <p>this is a basic</p>
+ }
  <h1 id="static">Static</h1>
- <p *ngFor="let item of demos">this is a static</p>
+ @for (item of demos; track $index) {
+ <p>this is a static</p>
+ }
 </div>

src/anchor/examples/nav-fake/nav-fake.component.html

@@ -1,28 +1,22 @@
 <div>
  <h1 id="components-anchor-demo-basic">Basic demo</h1>
- <p *ngFor="let item of demos">
- this is a demo
- </p>
+ @for (item of demos; track $index) {
+ <p>this is a demo</p>
+ }
  <h1 id="components-anchor-demo-static">Static demo</h1>
- <p *ngFor="let item of demos">
- this is a static demo
- </p>
- <h1 id="API">
- API
- </h1>
- <p *ngFor="let item of demos">
- this is a api
- </p>
- <h1 id="anchor-props">
- API - thy-anchor
- </h1>
- <p *ngFor="let item of demos">
- this is a api-anchor
- </p>
- <h1 id="link-props">
- API - thy-anchor-link
- </h1>
- <p *ngFor="let item of demos">
- this is a api-link
- </p>
+ @for (item of demos; track $index) {
+ <p>this is a static demo</p>
+ }
+ <h1 id="API">API</h1>
+ @for (item of demos; track $index) {
+ <p>this is a api</p>
+ }
+ <h1 id="anchor-props">API - thy-anchor</h1>
+ @for (item of demos; track $index) {
+ <p>this is a api-anchor</p>
+ }
+ <h1 id="link-props">API - thy-anchor-link</h1>
+ @for (item of demos; track $index) {
+ <p>this is a api-link</p>
+ }
 </div>

src/anchor/test/anchor.component.spec.ts

@@ -220,23 +220,33 @@ describe('thy-anchor', () => {
  <thy-anchor-link thyHref="#components-anchor-demo-basic" thyTitle="Basic demo"></thy-anchor-link>
  <thy-anchor-link thyHref="#components-anchor-demo-static" thyTitle="Static demo"></thy-anchor-link>
  <thy-anchor-link thyHref="#API" thyTitle="API">
- <ng-container *ngIf="showChildren">
+ @if (showChildren) {
  <thy-anchor-link thyHref="#anchor-props" thyTitle="thy-anchor"></thy-anchor-link>
  <thy-anchor-link thyHref="#link-props" thyTitle="thy-anchor-link"></thy-anchor-link>
- </ng-container>
+ }
  </thy-anchor-link>
  </thy-anchor>
  <div>
  <h1 id="components-anchor-demo-basic">Basic demo</h1>
- <p *ngFor="let item of demos">this is a demo</p>
+ @for (item of demos; track $index) {
+ <p>this is a demo</p>
+ }
  <h1 id="components-anchor-demo-static">Static demo</h1>
- <p *ngFor="let item of demos">this is a static demo</p>
+ @for (item of demos; track $index) {
+ <p>this is a static demo</p>
+ }
  <h1 id="API">API</h1>
- <p *ngFor="let item of demos">this is a api</p>
+ @for (item of demos; track $index) {
+ <p>this is a api</p>
+ }
  <h1 id="anchor-props">API - thy-anchor</h1>
- <p *ngFor="let item of demos">this is a api-anchor</p>
+ @for (item of demos; track $index) {
+ <p>this is a api-anchor</p>
+ }
  <h1 id="link-props">API - thy-anchor-link</h1>
- <p *ngFor="let item of demos">this is a api-link</p>
+ @for (item of demos; track $index) {
+ <p>this is a api-link</p>
+ }
  </div>
  </div>
  `
@@ -269,7 +279,9 @@ class TestAnchorComponent implements OnInit {
  </thy-anchor>
  <div>
  <h1 id="components-anchor-demo-basic">Basic demo</h1>
- <p *ngFor="let item of demos">this is a demo</p>
+ @for (item of demos; track $index) {
+ <p>this is a demo</p>
+ }
  </div>
  </div>
  `

src/arrow-switcher/arrow-switcher.component.html

@@ -1,19 +1,19 @@
-<div class="switcher-wrapper" *ngIf="theme === 'lite'; else default">
- <a
- thyAction
- [thyTooltip]="thyPreviousTooltip"
- href="javascript:;"
- [thyDisabled]="previousDisabled"
- class="mr-2"
- (click)="onPreviousClick($event)"
- ><thy-icon thyIconName="angle-up"></thy-icon
- ></a>
- <a thyAction [thyTooltip]="thyNextTooltip" href="javascript:;" [thyDisabled]="nextDisabled" (click)="onNextClick($event)"
- ><thy-icon thyIconName="angle-down"></thy-icon
- ></a>
-</div>
-
-<ng-template #default>
+@if (theme === 'lite') {
+ <div class="switcher-wrapper">
+ <a
+  thyAction
+  [thyTooltip]="thyPreviousTooltip"
+  href="javascript:;"
+  [thyDisabled]="previousDisabled"
+  class="mr-2"
+  (click)="onPreviousClick($event)"
+  ><thy-icon thyIconName="angle-up"></thy-icon
+  ></a>
+ <a thyAction [thyTooltip]="thyNextTooltip" href="javascript:;" [thyDisabled]="nextDisabled" (click)="onNextClick($event)"
+  ><thy-icon thyIconName="angle-down"></thy-icon
+ ></a>
+ </div>
+} @else {
  <div class="switcher-wrapper">
  <button
  thyButtonIcon="angle-left"
@@ -24,4 +24,5 @@
  <span>{{ index + 1 }} / {{ total }}</span>
  <button thyButtonIcon="angle-right" [thyTooltip]="thyNextTooltip" [disabled]="nextDisabled" (click)="onNextClick($event)"></button>
  </div>
-</ng-template>
+}
+

src/arrow-switcher/arrow-switcher.component.ts

@@ -15,7 +15,6 @@ import { ThyButtonIcon } from 'ngx-tethys/button';
 import { ThyIcon } from 'ngx-tethys/icon';
 import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
 import { ThyAction } from 'ngx-tethys/action';
-import { NgIf } from '@angular/common';
 
 export type ThyArrowSwitcherTheme = 'default' | 'lite';
 export interface ThyArrowSwitcherEvent {
@@ -40,7 +39,7 @@ export interface ThyArrowSwitcherEvent {
  }
  ],
  standalone: true,
- imports: [NgIf, ThyAction, ThyTooltipDirective, ThyIcon, ThyButtonIcon]
+ imports: [ThyAction, ThyTooltipDirective, ThyIcon, ThyButtonIcon]
 })
 export class ThyArrowSwitcher implements OnInit, ControlValueAccessor {
  @HostBinding('class.thy-arrow-switcher') _isArrowSwitcher = true;

src/autocomplete/autocomplete.component.html

@@ -2,7 +2,9 @@
  <div thyStopPropagation [ngClass]="dropDownClass">
  <div #panel class="thy-select-dropdown-options">
  <ng-content></ng-content>
- <thy-empty *ngIf="isEmptyOptions" [thyMessage]="thyEmptyText"></thy-empty>
+ @if (isEmptyOptions) {
+ <thy-empty [thyMessage]="thyEmptyText"></thy-empty>
+ }
  </div>
  </div>
 </ng-template>

src/autocomplete/autocomplete.component.ts

@@ -27,7 +27,7 @@ import {
 } from 'ngx-tethys/shared';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { ThyEmpty } from 'ngx-tethys/empty';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { coerceBooleanProperty } from 'ngx-tethys/util';
 
 /** Event object that is emitted when an autocomplete option is activated. */
@@ -54,7 +54,7 @@ export interface ThyAutocompleteActivatedEvent {
  }
  ],
  standalone: true,
- imports: [ThyStopPropagationDirective, NgClass, NgIf, ThyEmpty]
+ imports: [ThyStopPropagationDirective, NgClass, ThyEmpty]
 })
 export class ThyAutocomplete implements IThyOptionParentComponent, OnInit, AfterContentInit, OnDestroy {
  private ngUnsubscribe$ = new Subject<void>();