本文详解如何在 angular 中通过按钮点击事件，利用 `@input()` 和属性绑定实现父组件向子组件安全、响应式地传递数据，并附可运行代码示例与关键注意事项。
在 Angular 的组件通信体系中，父传子（Parent-to-Child）是最基础且高频的数据流场景。其核心机制是：父组件通过模板中的属性绑定（[property] 语法）将数据“推送”给子组件，子组件则使用 @Input() 装饰器声明接收该输入。整个过程由 Angular 的变更检测自动驱动——当父组件绑定的属性值更新时，子组件的 @Input() 属性会同步刷新，无需手动触发。
以下是一个典型、简洁且可直接复用的实现示例：
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child [message]="message"></app-child>
<button (click)="sendMessage()" class="btn btn-primary">发送消息</button>
`,
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: `
<div class="child-box">
<h3>子组件接收内容：</h3>
<p *ngIf="message; else noMessage">{{ message }}</p>
<ng-template #noMessage><em>暂无消息</em></ng-template>
</div>
`,
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 数据流设计哲学，是构建可维护组件树的基石实践。
