Angular 中父组件如何向子组件传递数据？

题目

Angular 中父组件如何向子组件传递数据？

信息

• 类型：问答
• 难度：⭐

考点

组件通信,输入属性,@Input装饰器

快速回答

在 Angular 中，父组件向子组件传递数据主要通过以下步骤：

1. 在子组件中使用 @Input() 装饰器声明接收属性
2. 在父组件模板中使用属性绑定语法 [property]="value"
3. 父组件通过属性绑定将数据传递给子组件

示例代码：

// 子组件
@Input() item: string;

<!-- 父组件模板 -->
<app-child [item]="parentData"></app-child>

原理说明

Angular 的组件通信机制基于单向数据流设计。父组件向子组件传递数据时：

• 子组件通过 @Input() 装饰器声明可接收的输入属性
• 父组件通过属性绑定（方括号语法）将数据传递给这些属性
• Angular 自动监听父组件数据变化并更新子组件

代码示例

子组件定义 (child.component.ts)：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>接收的数据: {{ item }}</p>`
})
export class ChildComponent {
  @Input() item: string;  // 声明输入属性
}

父组件模板 (parent.component.html)：

<!-- 通过属性绑定传递数据 -->
<app-child [item]="parentMessage"></app-child>

<button (click)="changeMessage()">更新数据</button>

父组件逻辑 (parent.component.ts)：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  parentMessage = '初始数据';

  changeMessage() {
    this.parentMessage = '更新后的数据';
  }
}

最佳实践

• 明确类型声明：始终为 @Input() 属性添加类型注解（如 @Input() item: string）
• 变更检测：对于对象/数组类型，使用不可变数据更新（创建新引用）触发变更检测
• 命名规范：输入属性名使用小驼峰命名法（camelCase）
• 默认值：可通过 @Input() item = 'default' 设置默认值

常见错误

• 拼写错误：子组件 @Input 属性名与父组件绑定名不一致
• 缺少方括号：误写成 <app-child item="parentData">（此时传递的是固定字符串）
• 变更检测失效：直接修改对象/数组内部属性（应返回新对象）
• 生命周期问题：在 ngOnInit() 中访问输入属性，构造函数中尚未初始化

扩展知识

• Setter 拦截：使用 setter 监听输入变化

  @Input() 
  set item(value: string) {
    console.log('数据变化:', value);
    this._item = value;
  }

• OnChanges 生命周期：实现 OnChanges 接口监听多个输入变化

  ngOnChanges(changes: SimpleChanges) {
    if (changes.item) {
      console.log('item 变化:', changes.item.currentValue);
    }
  }

• 其他通信方式：
  - 子→父：@Output() + 事件发射
  - 跨组件：Service + Subject（RxJS）
  - 深层嵌套：Angular 服务依赖注入