angular-control-flow

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Control Flow

Angular控制流

Version: Angular 17+ (2025) Tags: Control Flow, @if, @for, @switch, @defer

References: Control Flow • Deferrable Views

版本： Angular 17+ (2025) 标签： 控制流, @if, @for, @switch, @defer

参考资料： Control Flow • Deferrable Views

API Changes

API变更

This section documents recent version-specific API changes.

NEW: @if replaces *ngIf — New control flow syntax
NEW: @for replaces *ngFor — New loop syntax with track
NEW: @switch replaces ngSwitch — New switch syntax
NEW: @defer — Lazy load components
DEPRECATED: *ngIf, *ngFor, *ngSwitch — Migrate to new syntax

本节记录了近期版本对应的API变动。

新增：@if 替代 *ngIf —— 全新控制流语法
新增：@for 替代 *ngFor —— 带track的全新循环语法
新增：@switch 替代 ngSwitch —— 全新switch语法
新增：@defer —— 组件懒加载
已废弃：*ngIf、*ngFor、*ngSwitch —— 请迁移到新语法

Best Practices

最佳实践

Use @if for conditionals

@Component({
  template: `
    @if (isLoggedIn) {
      <p>Welcome!</p>
    } @else {
      <p>Please login</p>
    }
  `
})
export class MyComponent {
  isLoggedIn = signal(false);
}

Use @else if

@Component({
  template: `
    @if (user.role === 'admin') {
      <p>Admin panel</p>
    } @else if (user.role === 'user') {
      <p>User dashboard</p>
    } @else {
      <p>Guest view</p>
    }
  `
})
export class MyComponent {}

Use @for for loops

@Component({
  template: `
    @for (item of items; track item.id) {
      <li>{{ item.name }}</li>
    }
  `
})
export class MyComponent {
  items = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
}

Use track for performance

@for (user of users; track user.id) {
  <li>{{ user.name }}</li>
}

Use @empty for empty lists

@Component({
  template: `
    @for (item of items; track item.id) {
      {{ item.name }}
    } @empty {
      <p>No items found</p>
    }
  `
})
export class MyComponent {}

Use @switch for conditionals

@Component({
  template: `
    @switch (status) {
      @case ('loading') {
        <p>Loading...</p>
      }
      @case ('success') {
        <p>Success!</p>
      }
      @case ('error') {
        <p>Error occurred</p>
      }
      @default {
        <p>Unknown status</p>
      }
    }
  `
})
export class MyComponent {
  status = 'loading';
}

Use @defer for lazy loading

@Component({
  template: `
    @defer (on viewport) {
      <heavy-chart />
    } @placeholder {
      <div>Loading chart...</div>
    }
  `
})
export class DashboardComponent {}

Use @defer with conditions

@Component({
  template: `
    @defer (on hover) {
      <tooltip />
    }
    
    @defer (when isReady) {
      <ready-component />
    }
  `
})
export class MyComponent {}

Migrate from *ngIf

bash

ng generate @angular/core:control-flow

Use else with @if

@if (condition) {
  content
} @else {
  alternative
}

条件判断使用@if

@Component({
  template: `
    @if (isLoggedIn) {
      <p>Welcome!</p>
    } @else {
      <p>Please login</p>
    }
  `
})
export class MyComponent {
  isLoggedIn = signal(false);
}

使用@else if

@Component({
  template: `
    @if (user.role === 'admin') {
      <p>Admin panel</p>
    } @else if (user.role === 'user') {
      <p>User dashboard</p>
    } @else {
      <p>Guest view</p>
    }
  `
})
export class MyComponent {}

循环遍历使用@for

@Component({
  template: `
    @for (item of items; track item.id) {
      <li>{{ item.name }}</li>
    }
  `
})
export class MyComponent {
  items = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
}

使用track属性优化性能

@for (user of users; track user.id) {
  <li>{{ user.name }}</li>
}

空列表场景使用@empty

@Component({
  template: `
    @for (item of items; track item.id) {
      {{ item.name }}
    } @empty {
      <p>No items found</p>
    }
  `
})
export class MyComponent {}

多分支条件判断使用@switch

@Component({
  template: `
    @switch (status) {
      @case ('loading') {
        <p>Loading...</p>
      }
      @case ('success') {
        <p>Success!</p>
      }
      @case ('error') {
        <p>Error occurred</p>
      }
      @default {
        <p>Unknown status</p>
      }
    }
  `
})
export class MyComponent {
  status = 'loading';
}

使用@defer实现懒加载

@Component({
  template: `
    @defer (on viewport) {
      <heavy-chart />
    } @placeholder {
      <div>Loading chart...</div>
    }
  `
})
export class DashboardComponent {}

给@defer添加触发条件

@Component({
  template: `
    @defer (on hover) {
      <tooltip />
    }
    
    @defer (when isReady) {
      <ready-component />
    }
  `
})
export class MyComponent {}

从*ngIf语法迁移

bash

ng generate @angular/core:control-flow

在@if中搭配else使用

@if (condition) {
  content
} @else {
  alternative
}