Angular 父组件如何向子组件传值实现点击按钮同步展示输入数据

实现这个场景核心用Angular提供的*@Input()*装饰器完成父到子的单向数据传递，配合按钮点击事件触发数据更新即可，具体步骤如下：

步骤1：子组件定义接收参数 #

在展示子组件中通过*@Input()*声明需要接收的字段，可以分开定义单个字段，也可以直接定义聚合对象批量接收：

子组件ts代码（display.component.ts） #

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

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html'
})
export class DisplayComponent {
  // 方式1：分开定义接收字段
  @Input() firstName: string = '';
  @Input() lastName: string = '';
  @Input() email: string = '';

  // 方式2：聚合对象接收（可选，代码更简洁）
  // @Input() userInfo: {firstName: string, lastName: string, email: string} = {firstName: '', lastName: '', email: ''}
}

子组件模板代码（display.component.html） #

<!-- 对应方式1的展示效果 -->
<p>{{ firstName }} {{ lastName }} {{ email }}</p>

<!-- 对应方式2的展示效果 -->
<!-- <p>{{ userInfo.firstName }} {{ userInfo.lastName }} {{ userInfo.email }}</p> -->

步骤2：父组件定义数据与点击触发逻辑 #

顶部父组件维护表单输入的临时数据，点击按钮时将最新输入值赋值给绑定到子组件的变量即可：

父组件ts代码（top-panel.component.ts） #

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

@Component({
  selector: 'app-top-panel',
  templateUrl: './top-panel.component.html'
})
export class TopPanelComponent {
  // 绑定输入框的临时变量
  inputFirstName: string = '';
  inputLastName: string = '';
  inputEmail: string = '';

  // 传给子组件的变量
  passFirstName: string = '';
  passLastName: string = '';
  passEmail: string = '';
  // 聚合对象传值对应变量
  // passUserInfo = {firstName: '', lastName: '', email: ''}

  // 按钮点击触发方法
  submitInfo() {
    // 将当前输入值赋值给子组件绑定变量
    this.passFirstName = this.inputFirstName;
    this.passLastName = this.inputLastName;
    this.passEmail = this.inputEmail;
    // 聚合对象赋值写法
    // this.passUserInfo = {
    //   firstName: this.inputFirstName,
    //   lastName: this.inputLastName,
    //   email: this.inputEmail
    // }
  }
}

父组件模板代码（top-panel.component.html） #

<!-- 输入表单区域 -->
<div>
  <label>名字：</label>
  <input type="text" [(ngModel)]="inputFirstName" placeholder="请输入名字">
</div>
<div>
  <label>姓氏：</label>
  <input type="text" [(ngModel)]="inputLastName" placeholder="请输入姓氏">
</div>
<div>
  <label>邮箱：</label>
  <input type="email" [(ngModel)]="inputEmail" placeholder="请输入邮箱">
</div>
<button (click)="submitInfo()">确认提交</button>

<!-- 引入子组件并绑定输入属性 -->
<app-display 
  [firstName]="passFirstName"
  [lastName]="passLastName"
  [email]="passEmail"
></app-display>

<!-- 聚合对象传值的绑定写法 -->
<!-- <app-display [userInfo]="passUserInfo"></app-display> -->

注意事项 #

• 如果使用ngModel实现双向绑定，需要在当前组件所属的模块中导入FormsModule，否则绑定会失效
• @Input() 绑定的属性值发生变更时，子组件会自动同步更新视图，不需要额外手动触发渲染

内容的提问来源于stack exchange，提问作者Rajasekhar