Angular 中父组件向子组件传递数据的完整指南

聖光之護 2026-01-05 00:00:00 次阅读

本文详解如何在 angular 中通过按钮点击事件，利用 `@input()` 和属性绑定实现父组件向子组件安全、响应式地传递数据，并附可运行代码示例与关键注意事项。

在 Angular 的组件通信体系中，父传子（Parent-to-Child）是最基础且高频的数据流场景。其核心机制是：父组件通过模板中的属性绑定（[property] 语法）将数据“推送”给子组件，子组件则使用 @Input() 装饰器声明接收该输入。整个过程由 Angular 的变更检测自动驱动——当父组件绑定的属性值更新时，子组件的 @Input() 属性会同步刷新，无需手动触发。

以下是一个典型、简洁且可直接复用的实现示例：

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    
    
  `,
  styles: [`
    .btn { margin-top: 12px; padding: 8px 16px; }
  `]
})
export class ParentComponent {
  message = '初始消息：来自父组件';

  sendMessage(): void {
    this.message = `已发送：${new Date().toLocaleTimeString()}`;
  }
}

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    
      子组件接收内容：
      {{ message }}
      暂无消息
    
  `,
  styles: [`
    .child-box { 
      padding: 16px; 
      background: #f8f9fa; 
      border-radius: 4px; 
      margin: 12px 0;
    }
  `]
})
export class ChildComponent {
  @Input() message!: string; // 使用非空断言确保类型安全（或初始化为 ''）
}

✅ 关键要点说明：

@Input() 必须显式导入并装饰子组件的属性，否则 Angular 不会识别其为输入绑定点；
属性绑定语法 [message] 是单向数据流，确保子组件无法意外修改父组件状态（若需反向通信，请使用 EventEmitter + @Output()）；
每次调用 sendMessage() 后，this.message 值变更会立即触发 Angular 的变更检测，子组件视图随之更新；
推荐为 @Input() 属性添加类型注解（如 string）并配合 *ngIf 或非空断言（!），避免 undefined 渲染异常；
若需传递复杂对象或数组，同样适用此方式——但注意：引用类型传递的是引用，子组件不应直接修改父组件传入的对象属性（除非业务明确允许），否则可能引发状态污染。

综上，这种基于属性绑定的父传子模式轻量、高效、符合 Angular 数据流设计哲学，是构建可维护组件树的基石实践。