Angular 4父子组件数据同步传输问题求助

Hey there! Let’s work through this Angular 4 parent-child data transfer problem you’re facing. You mentioned digging into component data sharing and two-way binding without luck—let’s break down the most common solutions and pitfalls to get you unstuck.

1. Passing Data from Parent to Child (@Input) #

This is the standard way to send data down to a child component:

• In your child component .ts:
  First, import the Input decorator, then define a property to receive the parent’s data:

  import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'app-your-child-component',
    templateUrl: './your-child-component.html'
  })
  export class YourChildComponent {
    // Define the input property to accept the "bank" data from parent
    @Input() bank: any; // Replace "any" with your actual data type if possible
  }
  

• In your parent component .html:
  Bind the parent’s bank property to the child’s input:

  <app-your-child-component [bank]="bank"></app-your-child-component>
  

• Gotcha: If the parent’s bank data loads asynchronously (e.g., from an API), add *ngIf to avoid passing undefined to the child:

  <app-your-child-component *ngIf="bank" [bank]="bank"></app-your-child-component>
  

2. Sending Data from Child to Parent (@Output + EventEmitter) #

To send updates from the child back up to the parent:

• In your child component .ts:
  Import Output and EventEmitter, then create an emitter to trigger events:

  import { Component, Input, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-your-child-component',
    templateUrl: './your-child-component.html'
  })
  export class YourChildComponent {
    @Input() bank: any;
    // Create an output emitter (naming convention: [inputProperty]Change)
    @Output() bankUpdated = new EventEmitter<any>();
  
    // Example method to trigger the event when bank data changes in child
    updateBank(newBankData: any) {
      this.bank = newBankData;
      this.bankUpdated.emit(newBankData); // Send data back to parent
    }
  }
  

• In your parent component .html:
  Listen for the child’s event and handle it in a parent method:

  <app-your-child-component 
    [bank]="bank"
    (bankUpdated)="handleBankUpdate($event)"
  ></app-your-child-component>
  

• In your parent component .ts:
  Add the handler method to update the parent’s bank property:

  handleBankUpdate(updatedBank: any) {
    this.bank = updatedBank;
    // Add any other logic you need here
  }
  

3. Implementing Two-Way Binding ([(...)] Syntax) #

If you want true two-way binding (like Angular’s built-in [(ngModel)]), combine @Input and @Output following Angular’s naming rule:

• In your child component .ts:
  The output property must be named [inputProperty]Change:

  import { Component, Input, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-your-child-component',
    templateUrl: './your-child-component.html'
  })
  export class YourChildComponent {
    @Input() bank: any;
    // Output name must match input name + "Change"
    @Output() bankChange = new EventEmitter<any>();
  
    // When you update the bank data in child, emit the change
    onBankInputChange(newValue: any) {
      this.bankChange.emit(newValue);
    }
  }
  

• In your parent component .html:
  Use the two-way binding syntax directly:

  <app-your-child-component [(bank)]="bank"></app-your-child-component>
  

  Now any changes to bank in the child will automatically update the parent’s bank property, and vice versa.

• Did you import Input, Output, and EventEmitter from @angular/core in the child component? It’s an easy oversight!
• If you’re using form controls with two-way binding, make sure FormsModule is imported in your app module (or feature module):

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [FormsModule],
    // ... other module config
  })
  export class YourAppModule {}
  

• Double-check that your child component’s selector matches what you’re using in the parent template.

If you can share the full code for your child component (both .ts and .html), we can narrow down even more specific issues!

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