mcpField
A
angular-control-flow

angular-control-flow

github.com/oguzhan18开发7170 次安装31 周前更新
代码仓库

关于 angular-control-flow

面向 Angular 17+ 开发者的模板控制流参考技能，涵盖条件、循环、分支和延迟视图，并说明如何从旧指令迁移。

主要功能

  1. 01用 @if 和 @else 编写条件
  2. 02用 @for 跟踪列表并处理空状态
  3. 03用 @switch 和 @case 编写分支
  4. 04用 @defer 延迟加载视图
  5. 05迁移旧版控制流指令

适用场景

  1. 01编写条件模板区块
  2. 02显示带跟踪及空状态的列表
  3. 03按需加载视图
  4. 04转换 *ngIf 等旧指令

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-control-flow

安装后在 Claude Code 中输入/angular-control-flow确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular Control Flow

版本： Angular 17+（2025） 标签： Control Flow、@if、@for、@switch、@defer

参考： Control Flow • Deferrable Views

API 变更

本节记录近期特定版本的 API 变更。

  • 新增：@if 替代 *ngIf — 新的控制流语法

  • 新增：@for 替代 *ngFor — 支持 track 的新循环语法

  • 新增：@switch 替代 ngSwitch — 新的 switch 语法

  • 新增：@defer — 延迟加载组件

  • 已弃用：*ngIf、*ngFor、*ngSwitch — 迁移到新语法

最佳实践

  • 使用 @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 迁移
ng generate @angular/core:control-flow
  • 在 @if 中使用 else
@if (condition) {
  content
} @else {
  alternative
}

评论

支持 Markdown