Angular 5多子组件数据共享及父组件提交至数据库方案咨询

Hey there! Let's walk through how to handle this multi-step form setup in Angular 5. I’ve built similar workflows before, so here are the most straightforward and reliable approaches to share data between your child components and pass everything to the parent for saving:

方案1：使用共享服务（推荐） #

This is the cleanest approach for cross-component data sharing, especially when you need real-time sync between your 3 child components. Here's how to implement it:

Step 1: Create a Shared Service #

First, make a service to hold and manage your partenire object. In Angular 5, you’ll need to declare this service in your module’s providers array (since providedIn: 'root' came in Angular 6).

// partenire.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Partenire } from './partenire.model'; // Define your Partenire interface/model here

@Injectable()
export class PartenireService {
  // Use BehaviorSubject to hold the current state and emit updates
  private partenireSubject = new BehaviorSubject<Partenire>({} as Partenire);
  public partenire$ = this.partenireSubject.asObservable();

  // Update the partenire object with partial data from child components
  updatePartenire(data: Partial<Partenire>) {
    const currentState = this.partenireSubject.value;
    this.partenireSubject.next({ ...currentState, ...data });
  }

  // Get the complete partenire object for submission
  getCompletePartenire(): Partenire {
    return this.partenireSubject.value;
  }
}

Step 2: Update Data from Child Components #

Inject the service into each child component, and call updatePartenire() whenever the user fills out form fields:

// step1.component.ts (example for first child component)
import { Component } from '@angular/core';
import { PartenireService } from '../partenire.service';

@Component({
  selector: 'app-step1',
  templateUrl: './step1.component.html'
})
export class Step1Component {
  constructor(private partenireService: PartenireService) {}

  onBasicInfoChanged(formData: any) {
    // Pass only the relevant fields from this step to the service
    this.partenireService.updatePartenire({
      name: formData.name,
      email: formData.email,
      organization: formData.organization
    });
  }
}

Repeat this pattern for your other two child components, updating the corresponding fields of the partenire object.

Step 3: Submit from Parent Component #

In the parent component, inject the service and use getCompletePartenire() to get the full object when it’s time to save to the database:

// parent-form.component.ts
import { Component } from '@angular/core';
import { PartenireService } from './partenire.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-parent-form',
  templateUrl: './parent-form.component.html'
})
export class ParentFormComponent {
  constructor(
    private partenireService: PartenireService,
    private http: HttpClient
  ) {}

  onSubmit() {
    const completePartenire = this.partenireService.getCompletePartenire();
    
    // Send the data to your backend API
    this.http.post('/api/partenires', completePartenire)
      .subscribe(
        response => console.log('Partenire saved successfully!', response),
        error => console.error('Failed to save partenire:', error)
      );
  }
}

方案2：父组件作为数据中转中心 #

If you prefer a more explicit approach without services, you can use @Input and @Output to pass data through the parent component:

Step 1: Child Components Emit Data #

Each child component emits its form data to the parent using @Output:

// step2.component.ts (example for second child component)
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-step2',
  templateUrl: './step2.component.html'
})
export class Step2Component {
  @Output() contactInfoUpdated = new EventEmitter<any>();

  onContactFormSubmit(formData: any) {
    this.contactInfoUpdated.emit(formData);
  }
}

Step 2: Parent Component Manages the Full Object #

The parent component listens for emissions from each child, updates its own partenire object, and can pass relevant data back to other children via @Input if needed:

Parent Template:

<app-step1 (basicInfoUpdated)="updateBasicInfo($event)"></app-step1>
<app-step2 (contactInfoUpdated)="updateContactInfo($event)"></app-step2>
<app-step3 (detailsUpdated)="updateDetails($event)"></app-step3>

<button (click)="submitForm()">Save Partenire</button>

Parent Component TS:

// parent-form.component.ts
import { Component } from '@angular/core';
import { Partenire } from './partenire.model';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-parent-form',
  templateUrl: './parent-form.component.html'
})
export class ParentFormComponent {
  currentPartenire: Partenire = {} as Partenire;

  constructor(private http: HttpClient) {}

  updateBasicInfo(data: any) {
    this.currentPartenire = { ...this.currentPartenire, ...data };
  }

  updateContactInfo(data: any) {
    this.currentPartenire = { ...this.currentPartenire, ...data };
  }

  updateDetails(data: any) {
    this.currentPartenire = { ...this.currentPartenire, ...data };
  }

  submitForm() {
    this.http.post('/api/partenires', this.currentPartenire)
      .subscribe(
        res => console.log('Saved successfully!', res),
        err => console.error('Save failed:', err)
      );
  }
}

Which Approach to Choose? #

• Shared Service: Best if your child components need to react to each other’s data changes in real-time, or if you have a more complex component tree.
• Parent as Middleman: Great for simple multi-step forms where you want explicit control over data flow and minimal dependencies.

Both approaches work well in Angular 5—pick the one that fits your workflow best!

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