Angular 5父子组件通信：创建/编辑组件共用表单实现问询

针对你这个Create/Edit共用表单的场景，我给你整理了一套清晰的实现方案，完全适配你的需求——父组件通过Resolver获取数据（Edit模式），子表单组件负责渲染表单并处理验证，父子之间通过Angular的标准通信机制完成数据传递和事件交互：

1. 先搞定子表单组件：用@Input收数据，@Output发事件 #

首先我们把共用的表单抽成独立组件（比如叫OrganizationFormComponent），它只负责表单的初始化、渲染、验证，以及把提交的数据回传给父组件。核心就是用@Input接收父组件传来的初始化数据（Edit模式传已有组织数据，Create模式传空），用@Output触发提交事件把表单数据传给父组件。

子组件代码示例：

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-organization-form',
  templateUrl: './organization-form.component.html',
  styleUrls: ['./organization-form.component.css']
})
export class OrganizationFormComponent implements OnInit {
  // 接收父组件传入的组织数据，Edit模式用它填充表单，Create模式为空
  @Input() organizationData: any;
  // 提交表单时触发的事件，把表单数据抛给父组件处理
  @Output() formSubmitted = new EventEmitter<any>();
  
  organizationForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.initFormStructure();
    // 如果有传入的组织数据（Edit模式），就把数据填充到表单里
    if (this.organizationData) {
      this.patchExistingData();
    }
  }

  // 初始化表单的结构和验证规则
  private initFormStructure() {
    this.organizationForm = this.fb.group({
      id: [''], // Edit模式会填充，Create模式留空
      name: ['', Validators.required],
      description: [''],
      // 这里根据你的实际需求添加其他表单字段
    });
  }

  // 把已有组织数据填充到表单（Edit模式专属）
  private patchExistingData() {
    this.organizationForm.patchValue({
      id: this.organizationData.id,
      name: this.organizationData.name,
      description: this.organizationData.description,
      // 对应其他字段，和你的组织数据结构匹配就行
    });
  }

  // 表单提交逻辑：验证通过就把数据传给父组件
  onSubmit() {
    if (this.organizationForm.valid) {
      this.formSubmitted.emit(this.organizationForm.value);
    } else {
      // 这里可以加个前端提示，比如用你的AlertifyService
      console.log('表单验证失败，请检查必填项');
    }
  }
}

子组件的模板（organization-form.component.html）：

<form [formGroup]="organizationForm" (ngSubmit)="onSubmit()">
  <!-- Edit模式下用隐藏字段存id，Create模式自动为空 -->
  <input type="hidden" formControlName="id">
  
  <div class="form-group">
    <label>组织名称</label>
    <input formControlName="name" type="text" class="form-control">
    <span class="text-danger" *ngIf="organizationForm.get('name').invalid && organizationForm.get('name').touched">
      组织名称为必填项
    </span>
  </div>

  <div class="form-group">
    <label>组织描述</label>
    <textarea formControlName="description" class="form-control"></textarea>
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="organizationForm.invalid">
    {{ organizationData ? '更新组织' : '创建组织' }}
  </button>
</form>

2. 父组件（OrganizationEditComponent）：传数据+监听提交事件 #

父组件的核心工作是：在Edit模式下通过Resolver拿到组织数据，把数据传给子表单；同时监听子组件的提交事件，根据当前是Create还是Edit模式，调用对应的接口处理新增或更新。

父组件代码示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AlertifyService } from '../../_services/alertify.service';
// 假设你有处理组织业务的服务
import { OrganizationService } from '../../_services/organization.service';

@Component({
  selector: 'app-organization-edit',
  templateUrl: './organization-edit.component.html',
  styleUrls: ['./organization-edit.component.css']
})
export class OrganizationEditComponent implements OnInit {
  organizationData: any;
  isEditMode: boolean = false;

  constructor(
    private route: ActivatedRoute,
    private alertify: AlertifyService,
    private organizationService: OrganizationService
  ) { }

  ngOnInit() {
    // 从Resolver获取数据，这里假设Resolver返回的key是'organization'
    this.route.data.subscribe(data => {
      this.organizationData = data['organization'];
      // 有数据就是Edit模式，没有就是Create模式
      this.isEditMode = !!this.organizationData;
    });
  }

  // 处理子组件传来的表单数据，分Create/Edit两种情况
  handleFormSubmission(formData: any) {
    if (this.isEditMode) {
      // Edit模式：调用更新接口
      this.organizationService.updateOrganization(formData.id, formData).subscribe(
        () => {
          this.alertify.success('组织更新成功！');
          // 这里可以跳转到组织列表页或者其他页面
        },
        error => {
          this.alertify.error(`更新失败：${error.message}`);
        }
      );
    } else {
      // Create模式：调用新增接口
      this.organizationService.createOrganization(formData).subscribe(
        () => {
          this.alertify.success('组织创建成功！');
          // 跳转回列表页
        },
        error => {
          this.alertify.error(`创建失败：${error.message}`);
        }
      );
    }
  }
}

父组件的模板（organization-edit.component.html）：

<div class="container mt-4">
  <h1 class="mb-4">{{ isEditMode ? '编辑组织' : '创建组织' }}</h1>
  <!-- 引用子表单组件，传递数据并监听提交事件 -->
  <app-organization-form
    [organizationData]="organizationData"
    (formSubmitted)="handleFormSubmission($event)">
  </app-organization-form>
</div>

3. 补充：路由与Resolver的配合（确保Edit模式能拿到数据） #

既然你提到用Resolver填充组织数据，那路由配置得对应上，区分Create和Edit模式的路由：

路由模块代码示例：

import { Routes, RouterModule } from '@angular/router';
import { OrganizationEditComponent } from './organization-edit/organization-edit.component';
import { OrganizationResolver } from './_resolvers/organization.resolver';

const routes: Routes = [
  // Create模式：路由不带id，直接进入
  { path: 'organizations/create', component: OrganizationEditComponent },
  // Edit模式：路由带id，通过Resolver提前获取数据
  { path: 'organizations/edit/:id', component: OrganizationEditComponent, resolve: { organization: OrganizationResolver } }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OrganizationRoutingModule { }

Resolver的示例（OrganizationResolver）：

import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { OrganizationService } from '../_services/organization.service';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class OrganizationResolver implements Resolve<any> {
  constructor(private organizationService: OrganizationService) { }

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    // 根据路由参数里的id，调用服务获取组织详情
    return this.organizationService.getOrganization(route.params['id']);
  }
}

为什么选这个方案？ #

这是Angular父子组件通信的标准最佳实践：

• 职责分离：子组件只管表单，父组件管业务逻辑（新增/更新），代码清晰易维护；
• 单向数据流：父组件传数据给子组件，子组件通过事件回传数据，避免直接操作子组件内部状态，降低耦合；
• 适配你的场景：完美支持Create/Edit两种模式，Edit模式用Resolver的数据填充表单，Create模式传空即可。

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