如何用信号输入迁移把 Angular 的 Input 字段转换为 input() API【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular在一个已经使用Input装饰器声明输入属性的 Angular 项目中把现有组件迁移到新的信号输入 APIinput()是一个常见的升级任务。Angular 的信号输入 API 自 v19 起被视为 production ready官方为这一升级提供了自动迁移 schematic一条命令即可把Input字段转换为input()声明并同步更新所有引用处。本文基于 Angular 仓库中的迁移参考文档 signal-inputs.md 与 schematic 定义说明完整的迁移操作路径。前提说明你的项目是一个 Angular CLI 工作区其中存在使用Input声明的组件或指令输入。原有的装饰器InputAPI 仍然完全受支持迁移是为了切换到官方推荐的新 API见 inputs 指南。迁移会改动哪些代码迁移对每个可安全迁移的输入做两件事Input()类成员更新为等价的信号input()声明对已迁移输入的引用更新为调用信号包括模板、host bindings 和 TypeScript 代码中的引用。官方文档给出的示例Beforeimport {Component, Input} from angular/core; Component({ template: Name: {{ name ?? }}, }) export class MyComponent { Input() name: string | undefined undefined; someMethod(): number { if (this.name) { return this.name.length; } return -1; } }迁移后Afterimport {Component, input} from angular/core; Component({ template: Name: {{ name() ?? }}, }) export class MyComponent { readonly name inputstring(); someMethod(): number { const name this.name(); if (name) { return name.length; } return -1; } }注意两点变化模板中的name变成了name()调用组件内部对this.name的读取也改成了先取信号值再使用。迁移后的输入是只读的InputSignalinput函数只能在组件和指令的属性初始化器中调用见 inputs 指南。运行迁移命令在工作区根目录执行ng generate angular/core:signal-input-migration按 collection.json 的定义该 schematic 还注册了别名signal-inputs和signal-input因此ng generate angular/core:signal-inputs是等价写法。默认行为见 schema.json--path默认为./即迁移整个 Angular CLI 工作区迁移尽量安全地重构代码跳过无法安全迁移的输入。按需使用四个配置选项迁移支持若干选项用于针对项目情况做细调选项说明来自 signal-inputs.md。用--path限定迁移目录默认迁移整个工作区。如果只想升级某一部分代码可以用--path把迁移范围限定到某个子目录。用--insert-todos标记被跳过的输入默认情况下无法安全迁移的输入会被静默跳过。启用--insert-todos后迁移会为这些输入添加 TODO 注释并写明跳过原因例如// TODO: Skipped for migration because: // Your application code writes to the input. This prevents migration. Input() myInput false;文档示例表明当应用代码会对输入写入值时该输入默认不会被迁移。这个选项适合迁移后快速定位哪些字段需要人工处理。用--best-effort-mode激进迁移有风险默认迁移只处理可安全迁移的输入。启用--best-effort-mode后迁移会尽量多地迁移代码文档明确警告这可能会破坏你的构建even if it could break your build。除非你清楚自己在做什么并准备好事后修复否则不要默认开启它。用--analysis-dir缩小分析范围有风险默认情况下无论--path怎么设置迁移都会分析整个工作区以保证更新到所有受影响的引用。在大项目中可以用--analysis-dir把分析范围限定到某个子文件夹。文档同样明确警告该目录之外的引用会被静默跳过可能导致构建失败。两个带风险的选项默认值均为false/ 全工作区path与analysisDir默认./与 schema 定义一致。验证迁移结果迁移完成后的核对方式与文档给出的信息一致检查改动是否符合预期模式被迁移的输入应从Input()声明变为readonly xxx input...()且模板、host bindings 与 TS 代码中的引用变为信号调用即上一节 Before/After 示例展示的形态。查看被跳过的输入如果使用了--insert-todos在代码中搜索 TODO 注释确认哪些输入未迁移以及文档记录的原因如代码对输入有写入。构建校验文档在--best-effort-mode与--analysis-dir两处均以“可能破坏构建”作为风险描述因此运行项目构建来验证迁移结果是这两类激进选项下必要的收尾动作即使使用默认安全模式构建确认改动无误也是合理的验证手段。可选替代路径VSCode 重构操作如果不想跑整个工作区级别的迁移可以在 VSCode 中逐字段完成转换同样来自 signal-inputs.md安装最新版本的 Angular VSCode 扩展光标点击一个Input字段或点击一个 directive/component等待 VSCode 的黄色灯泡重构按钮出现通过该按钮选择信号输入迁移操作。该方式是单点式转换适合只想迁移个别组件或先做试点的场景批量升级仍以ng generate命令为主路径。边界与注意事项默认模式是保守的无法安全迁移的输入例如应用代码会对输入写入会被跳过而不是强行改写迁移后需要依靠--insert-todos或代码 diff 找出这些字段。信号输入有使用限制input函数带有编译器特殊语义只能在组件和指令的属性初始化器中调用。同一 schematic 集合中还包含signal-queries、output等其他迁移见 collection.json 与 migrations 总览它们各自是独立的升级任务本文只覆盖Input到input()这一条路径不要把多个迁移混在同一次验证中。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考