试试Angular的新信号输入迁移功能

作者们：保罗·格申德特纳，Mark Thompson [https://bsky.app/profile/marktechson.com]

信号输入特性现已准备好生产使用，Angular团队非常高兴能提供新的迁移工具来帮助你和你的团队将基于装饰器的输入更新为新的信号API，以适应新的信号API。

查看官方文档中的更多详情：https://angular.dev/reference/migrations/signal-inputs

信号输入提供了出色的输入功能更新，同时保持了与基于装饰器的输入的功能相同。团队想要更新的主要原因之一是类型安全特性，这使开发人员能够移除如非空断言这样的脆弱代码模式。还有个很棒的新方法，使输入监控变得更简单。

下面举一个例子，其中 MyComponent 使用 ngOnChanges 生命周期钩子来跟踪输入的变化。

export class MyComponent implements OnChanges {  
  @Input() myField: string = 'Initial';  
  result = expensiveResultUsingInput(this.myField);  

  ngOnChanges(changes: SimpleChanges) {  
    if (changes['myField']) {  
      // 属性变化时重新计算结果  
      this.result = expensiveResultUsingInput(this.myField);  
    }  
  }  
}

这个代码可以使用信号输入（signal inputs）和Angular的computed进行简洁地重构。

export class MyComponent {  
  readonly myField = input('初始');  
  readonly result = 计算属性(() => 基于输入的耗时计算结果(this.myField()));  
}

这样的新解决方案将不断涌现，因为开发者自然倾向于使用方便的信号API来编写更清晰和有效的代码，在你的项目和生态系统里。

我们注意到，信号（Signal）总体上简化了Angular开发者的思维模型，这让理解状态如何同步到UI，以及状态的流动情况更简单。

就像以前的迁移一样，你可以通过 Angular CLI 运行迁移。但我们也将迁移工作提升为 VSCode 中可供执行的代码重构操作。点击黄色灯泡会显示新的操作建议，用于将基于装饰器的输入转换为基于信号的输入。

使用 Angular CLI 时，可以执行以下命令：

ng 生成命令 @angular/core:信号输入

迁移完成后，该工具不仅会更新@Input声明，并在必要时引入变量，以智能地将信号合理地整合到现有应用程序代码中，还会调整对输入的引用，以确保合理整合信号到现有代码中。

咱们来考虑一下这个例子。

以前：

@Component(…)  
export class MyComp {  
  @Input() user?: User|undefined;  
  // 打印用户信息
  printUser() {  
    if (this.user) {  
      this.user.printDetails();  
    }  
  }  
}

之后呢：

@Component(...)  
export class MyComp {  
  readonly user = input<User>();  
  // 用户是一个只读的 User 类型的输入变量

  printUser() {  
    // 打印用户信息的函数
    const user = this.user();  
    if (user) {  
      user.printDetails();  
    }  
  }  
}

迁移是可配置的，并提供了一些选项来帮助您选择正确的迁移策略，不论是全面迁移还是仅迁移特定路径。您可以在迁移文档中了解更多详情。

我们激动不已能够推动 Angular 前进，并逐步实现我们构建一个新反应式模型的目标，让你能够自信地开发 web 应用。