Angular 17+ 全新控制流语法 @if

Angular 17+ 全新控制流语法 @if 的相关介绍以及时间经历

引言：为什么需要新的控制流语法？

在 Angular 17 之前，开发者一直使用 *ngIf 进行条件渲染。全新的 @if 语法带来了重大改进：

语法更简洁直观：更接近原生 JavaScript，减少模板复杂度
零导入依赖：自动在模板中可用，无需从 @angular/common 导入
增强的类型检查：通过更优化的类型缩小机制提供更好的类型安全
优化包体积：构建时优化减少运行时占用空间，减小最终包大小
面向未来的设计：为基于信号的变化检测实现铺平道路

@if 语法

typescript 复制代码

// 传统方式
@Component({
  template: `
    <h2 *ngIf='show'>Hello Word</h2>
  `,
})
// Angular 17+ 新方式
@Component({
  template: `
    @if (show) {
    <h2>Hello Word</h2>
    }
  `,
})
class Example {
  show: boolean = true;
}

我们可以发现新的语法与javaScript的 if 语句一样。

##@else语法

typescript 复制代码

@Component({
  template: `
    @if (show) {
    <h2>Hello Word</h2>
    }
    @else {
    <h2>Goodbye</h2>
    }
  `,
})
class Example {
  show: boolean = true;
}

@else if else语法

typescript 复制代码

@Component({
  template: `
    @if (show) {
    <h2>Hello Word</h2>
    }
    @else if(showMid) {
    <h2>Goodbye</h2>
    }
    @else {
      <h2>See you later</h2>
    }
  `,
})
class Example {
  show: boolean = true;
  showMid: boolean = true;
}

我们用到了与js一摸一样的写法，这是*ngIf做不到的。

为什么不再需要单独的导入@if

我们不再需要将@if导入@angular/common到我们的组件模板中。与*ngIf不同的是@if语法是模板引擎本身的一部分，而不是指令。新功能@if直接内置于模板引擎中，因此可在任何地方自动使用。

如何迁移到@if

如果您使用的是旧版本的 Angular，则可以使用 Angular CLI迁移到新语法。
Angular CLI 具有自动迁移功能，可以将所有代码升级到新@if语法：

git bash 复制代码

ng generate @angular/core:control-flow

此命令将把*ngIf项目中的所有指令迁移到新语法，不仅适用于@if，也适用于@for和@switch语法。
至此，对@if的介绍就结束啦。赶快用起来吧。