Angular6中如何通过@Input属性在组件间传递表单对象？

当然可以通过@Input属性实现这个需求！不过你的现有代码存在几处小问题，导致数据没能正常传递，我来一步步帮你修正：

1. 修正父组件的变量赋值逻辑 #

你在onSubmit方法里只声明了一个局部变量FormObject，但并没有把表单值赋值给组件类的parentObject属性——这是核心问题，导致子组件始终接收空值。

修改parent.component.ts的onSubmit方法：

onSubmit(){
  console.log(this.addForm.value);
  // 将表单值赋值给组件类的parentObject属性，而非局部变量
  this.parentObject = this.addForm.value;
}

2. 修复父组件模板的拼写错误 #

你的子组件标签里有两个小问题：

• 变量名大小写不匹配：应该用组件类中定义的parentObject，而非FormObject
• 多了一个多余的]符号

修正后的子组件标签：

<app-forms [parentObject]="parentObject"></app-forms>

3. 子组件实时接收数据的优化 #

你现在在ngOnInit里打印数据，但ngOnInit只在组件初始化时执行一次。如果表单是后续提交的，ngOnInit里打印的还是初始的undefined。可以通过以下方式优化：

方式一：用ngOnChanges监听数据变化 #

修改child.component.ts，添加OnChanges钩子：

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

@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.css']
})
export class FormsComponent implements OnInit, OnChanges {
  @Input() parentObject: Object;

  constructor() { }

  ngOnInit() {
    console.log('初始化时的parentObject:', this.parentObject);
  }

  ngOnChanges(changes: SimpleChanges) {
    // 当parentObject更新时触发
    if (changes['parentObject']) {
      console.log('更新后的parentObject:', changes['parentObject'].currentValue);
    }
  }
}

方式二：在子组件模板直接展示数据 #

在child.component.html中添加渲染逻辑，实时展示接收的数据：

<div *ngIf="parentObject">
  <h3>子组件接收到的表单数据：</h3>
  <p>Name: {{ parentObject.name }}</p>
  <p>First Name: {{ parentObject.fname }}</p>
  <p>Last Name: {{ parentObject.lname }}</p>
</div>

完整修正后的代码 #

parent.component.ts #

import { Component, OnInit } from '@angular/core';
import { FormGroup ,FormBuilder } from '@angular/forms';
import {Router} from "@angular/router";

@Component({
  selector: 'app-form1',
  templateUrl: './form1.component.html',
  styleUrls: ['./form1.component.css']
})
export class Form1Component implements OnInit {
  addForm:FormGroup;
  parentObject:Object;

  constructor(private fb:FormBuilder, private router: Router) { }

  ngOnInit() {
    this.addForm=this.fb.group({
      name:[''],
      fname:[''],
      lname:['']
    })
  }

  onSubmit(){
    console.log(this.addForm.value);
    this.parentObject = this.addForm.value;
  }
}

parent.component.html #

<form [formGroup]="addForm" (ngSubmit)="onSubmit()">
 Name: <input type="text" formControlName="name" placeholder="Name"><br/>
 Fname: <input type="text" formControlName="fname" placeholder="FirstNAme"><br/>
 Lname: <input type="text" formControlName="lname" placeholder="LastName"><br/>
 <button>Submit</button>
</form>
<h1>Hello {{message}}</h1>
<br/>
<app-forms [parentObject]="parentObject"></app-forms>

child.component.ts #

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

@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.css']
})
export class FormsComponent implements OnInit, OnChanges {
  @Input() parentObject: Object;

  constructor() { }

  ngOnInit() {
    console.log('初始化时的parentObject:', this.parentObject);
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['parentObject']) {
      console.log('更新后的parentObject:', changes['parentObject'].currentValue);
    }
  }
}

这样调整后，提交表单时父组件的parentObject会被赋值，然后通过@Input传递给子组件，子组件就能实时获取到最新的表单数据了。

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