在 Angular 应用里，组件化开发要求把界面拆成独立、可复用的单元。当父组件需要把数据交给子组件渲染或处理时，最直接的方式就是通过 @Input() 装饰器建立单向数据流。这种方式不仅语义清晰，也契合 Angular 变更检测的设计思路。
一、@Input() 的基本定义与引入
@Input() 是 Angular 核心库提供的属性装饰器，用于标记一个组件类中允许从外部模板接收数据的成员。从技术原理上看，它会在组件编译阶段向 Angular 的元数据系统注册该属性名，使得父组件模板在解析属性绑定时能够识别并赋值。
要使用它，首先需要从 @angular/core 中导入。然后在子组件类的属性前添加 @Input() 注解。这个属性在子组件内部可以像普通类成员一样读取，但在模板中只能通过父组件的属性绑定语法写入。下面的代码展示了最小可用结构：
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: '<p>收到父组件消息：{{ message }}</p>'
})
export class ChildComponent {
// 使用装饰器暴露输入属性
@Input() message: string = '';
}
上例中，message 初始为空字符串，避免父组件未传值时出现 undefined 渲染异常。这种默认值写法在真实项目中能减少模板中的空判断逻辑。
需要注意，@Input() 本身只是声明，真正的数据流动发生在父组件模板绑定阶段。如果父组件没有用方括号语法传入，子组件拿到的就只是默认值。这也是很多初学者误以为装饰器失效的根本原因。
二、父组件中的绑定写法
在父组件模板中，使用方括号包裹子组件属性名，并把右侧表达式指向父组件自身的成员。Angular 会基于属性绑定机制，在变更检测周期内把右侧值同步到子组件输入属性上。
绑定分为静态字符串与动态表达式两类。静态写法适合固定文本，动态写法才能体现组件通信价值。参考下面父组件示例：
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child [message]="parentText"></app-child>
<button (click)="changeText()">改内容</button>
`
})
export class ParentComponent {
parentText: string = '初始内容';
changeText() {
this.parentText = '点击后的新内容';
}
}
当点击按钮修改 parentText 时，Angular 的变更检测会比对前后值，发现不同后自动把新值写入子组件的 message 属性，触发子组件视图更新。这正是单向数据流的可预测优势。
如果写成不带方括号的 <app-child message="parentText">，子组件收到的将是字符串 parentText 而非变量值。这种语法差异在调试时极容易忽略，建议团队在代码评审中重点检查。
三、监听输入变化与 OnChanges
子组件常常需要在输入值变更时执行额外逻辑，例如重新请求接口或转换格式。此时可实现 OnChanges 接口，并利用 ngOnChanges 钩子捕获变更明细。
ngOnChanges 会收到一个 SimpleChanges 对象，其中每个输入属性对应一个 SimpleChange 实例，包含 previousValue、currentValue 和 firstChange 字段。通过判断 firstChange 可区分首次赋值与后续更新。
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-user-card',
template: '<div>{{ displayName }}</div>'
})
export class UserCardComponent implements OnChanges {
@Input() name: string = '';
displayName: string = '';
ngOnChanges(changes: SimpleChanges) {
if (changes['name']) {
const current = changes['name'].currentValue;
this.displayName = current ? current.toUpperCase() : '匿名';
}
}
}
上述代码在每次 name 输入变化时，都把名字转成大写展示。若输入可能为异步获取的空值，firstChange 配合 currentValue 检查能有效防止初次渲染抖动。
与直接在模板写转换表达式相比，ngOnChanges 更适合有副作用的场景。但也要注意，频繁的输入变更会带来钩子调用开销，复杂计算建议结合纯管道或 memo 思路优化。
四、别名与配置化输入
@Input() 支持传入字符串参数作为别名，让子组件内部属性名与外部模板绑定名解耦。这在封装第三方组件或避免命名冲突时非常实用。
例如内部叫 userId，外部希望用 uid 绑定，可写成 @Input('uid') userId: string。父模板使用 [uid] 即可，子组件代码保持 userId 不变。这种映射由 Angular 编译器在元数据层完成，运行期无额外成本。
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-avatar',
template: '<img [src]="avatarUrl" />'
})
export class AvatarComponent {
@Input('uid') userId: string = '';
get avatarUrl() {
return 'https://ipipp.com/avatar/' + this.userId;
}
}
别名机制也利于组件 API 演进。当内部重构属性名时，只需调整装饰器参数，外部业务模板无需改动，降低升级成本。
不过别名不宜过度使用，否则会让组件维护者需要在两处跳转理解映射关系。建议仅在公开 API 与内部实现确需区分时才采用。
五、常见误区与注意事项
一个典型误区是认为 @Input() 传递的是引用且子组件修改会影响父组件。实际上对于对象类型，子组件修改对象内部字段确实会反映到父级，因为 JavaScript 对象是共享引用；但重新赋值输入属性本身不会回传父级，Angular 也不会反向同步。
为避免意外耦合，推荐子组件把输入对象视为不可变数据，需要改动时通过 EventEmitter 向父组件发事件。另一个误区是在构造函数里读取输入属性，此时绑定尚未发生，值通常是默认初始值。
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-bad-example',
template: '<p>{{ info }}</p>'
})
export class BadExampleComponent {
@Input() title: string = '';
constructor() {
// 错误：此时 title 还未被父组件绑定
console.log(this.title);
}
}
正确做法是把依赖输入的逻辑放到 ngOnInit 或 ngOnChanges 中，确保数据就绪。此外，在 OnPush 变更检测策略下，输入必须是新引用才会触发子视图更新，这对对象输入提出了不可变更新的要求。
总体而言，@Input() 是 Angular 父子通信的基石。掌握其装饰器原理、绑定语法、变更监听与别名技巧，再避开构造期读取和可变对象陷阱，就能写出边界清晰、易测试的组件。