DEV Community
·
Angular 19：掌握 `input.required()` 和结合 Signals 的功能性输入
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
Angular 19 引入了功能性 input() API，简化了输入声明，取代了传统的 @Input() 装饰器。通过 input.required<T>() 和 input.optional<T>()，实现了更好的类型安全和反应性，结合 Signals，使组件更高效、安全，推动了 Angular 向反应式和可组合组件的转变。
🎯
关键要点
- Angular 19 引入了功能性 input() API，简化了输入声明，取代了传统的 @Input() 装饰器。
- input.required<T>() 和 input.optional<T>() 提供了更好的类型安全和反应性。
- input() 函数是 Angular 的功能性输入绑定系统的一部分，允许不使用装饰器声明输入。
- input.required<T>() 要求父组件始终传递值，缺失时会抛出运行时错误。
- input.optional<T>() 接受 undefined，可以包含默认值。
- 可以通过 .signal 将任何输入转换为反应式信号。
- Angular 19 组件可以是独立的、强类型的、基于信号和反应式的，确保运行时安全。
- 最佳实践包括使用 input.required() 来确保安全性，优先使用 .signal 以确保反应性。
- Angular 19 继续推动反应式、可组合和独立友好的组件发展，鼓励开发者放弃装饰器，拥抱功能性未来。
❓
延伸问答
Angular 19 中引入的功能性 input() API 有什么优势？
功能性 input() API 简化了输入声明，提供了更好的类型安全和反应性，取代了传统的 @Input() 装饰器。
如何使用 input.required<T>() 和 input.optional<T>()？
input.required<T>() 要求父组件始终传递值，缺失时会抛出运行时错误；而 input.optional<T>() 接受 undefined，可以包含默认值。
Angular 19 如何实现输入的反应性？
可以通过 .signal 将任何输入转换为反应式信号，从而在模板或计算信号中使用。
Angular 19 的最佳实践是什么？
最佳实践包括使用 input.required() 确保安全性，优先使用 .signal 以确保反应性，并避免可变结构。
Angular 19 如何推动组件的独立性和可组合性？
Angular 19 鼓励开发者放弃装饰器，采用功能性输入，推动组件向反应式、可组合和独立友好的方向发展。
input.required<T>() 和 @Input() 装饰器有什么区别？
input.required<T>() 是无装饰器的，提供强类型和必需性检查，而 @Input() 装饰器则不具备这些特性。
🏷️
标签
➡️
