Angular中子组件间通信：Angular 4父子及子子组件传值实现

Great question! In Angular 4, you absolutely can pass data between two sibling components—there’s no direct built-in way to do it, but we’ve got a few reliable patterns to make this work. Let’s walk through each method with concrete examples, plus break down when each makes the most sense.

1. Parent Component as a Mediator (Using @Input + @Output) #

This is the most straightforward approach, leveraging the @Input and @Output decorators you already know. The idea is:

• Sibling A emits data to the parent via @Output + EventEmitter
• Parent updates its own property with the received data
• Sibling B receives the updated data via @Input

Example Code: #

Parent Component (parent.component.ts)

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

@Component({
  selector: 'app-parent',
  template: `
    <app-sibling-a (dataEmitted)="handleDataFromSiblingA($event)"></app-sibling-a>
    <app-sibling-b [receivedData]="sharedData"></app-sibling-b>
  `
})
export class ParentComponent {
  sharedData: any;

  handleDataFromSiblingA(data: any) {
    this.sharedData = data;
  }
}

Sibling A Component (sibling-a.component.ts)

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

@Component({
  selector: 'app-sibling-a',
  template: `
    <button (click)="sendData()">Send Data to Sibling B</button>
  `
})
export class SiblingAComponent {
  @Output() dataEmitted = new EventEmitter<string>();

  sendData() {
    this.dataEmitted.emit("Hello from Sibling A!");
  }
}

Sibling B Component (sibling-b.component.ts)

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

@Component({
  selector: 'app-sibling-b',
  template: `
    <p>Data from Sibling A: {{ receivedData }}</p>
  `
})
export class SiblingBComponent {
  @Input() receivedData: string;
}

###适用场景：

• Simple sibling relationships where the parent is already closely tied to both children
• Small, one-off data transfers (like passing a single value or simple object)
• You want to keep data flow explicit and easy to trace

2. Shared Service with Observables #

For more complex apps (or when siblings are nested deep in different parts of the component tree), a shared service with observables is the way to go. We’ll use BehaviorSubject (a type of Subject that holds the current value and emits it to new subscribers) to handle data sharing.

Example Code: #

Shared Service (data-sharing.service.ts)

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; // Angular 4 uses rxjs v5, so this import is correct

@Injectable()
export class DataSharingService {
  private dataSubject = new BehaviorSubject<string>("Initial value");
  public data$ = this.dataSubject.asObservable();

  updateData(data: string) {
    this.dataSubject.next(data);
  }
}

Sibling A Component (sibling-a.component.ts)

import { Component } from '@angular/core';
import { DataSharingService } from './data-sharing.service';

@Component({
  selector: 'app-sibling-a',
  template: `
    <button (click)="sendData()">Send Data via Service</button>
  `
})
export class SiblingAComponent {
  constructor(private dataService: DataSharingService) {}

  sendData() {
    this.dataService.updateData("Hello from Sibling A via Service!");
  }
}

Sibling B Component (sibling-b.component.ts)

import { Component, OnInit } from '@angular/core';
import { DataSharingService } from './data-sharing.service';

@Component({
  selector: 'app-sibling-b',
  template: `
    <p>Data from Service: {{ currentData }}</p>
  `
})
export class SiblingBComponent implements OnInit {
  currentData: string;

  constructor(private dataService: DataSharingService) {}

  ngOnInit() {
    this.dataService.data$.subscribe(data => {
      this.currentData = data;
    });
  }
}

Important Note: In Angular 4, make sure to provide this service at the root level (in your AppModule's providers array) so it acts as a singleton. If you provide it in individual components, each will get their own instance, which won’t work for sharing data.

###适用场景：

• Multiple components (not just two siblings) need access to the same data
• Siblings are in different branches of the component tree (not direct children of the same parent)
• You need to handle continuous data updates (like real-time state changes)
• You want to decouple components from their parent for better reusability

3. ViewChild to Access Sibling Instance (Parent-Mediated) #

If you need the parent to actively fetch data from one sibling and pass it to another (instead of waiting for an emission), you can use ViewChild to get a reference to the sibling component instance.

Example Code: #

Parent Component (parent.component.ts)

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { SiblingAComponent } from './sibling-a.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-sibling-a #siblingA></app-sibling-a>
    <button (click)="passDataToSiblingB()">Pass Data to Sibling B</button>
    <app-sibling-b [receivedData]="sharedData"></app-sibling-b>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('siblingA') siblingA: SiblingAComponent;
  sharedData: string;

  ngAfterViewInit() {
    // Access sibling A's properties/methods once the view is initialized
    this.sharedData = this.siblingA.someData;
  }

  passDataToSiblingB() {
    this.sharedData = this.siblingA.getUpdatedData();
  }
}

Sibling A Component (sibling-a.component.ts)

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

@Component({
  selector: 'app-sibling-a',
  template: `
    <p>I hold this data: {{ someData }}</p>
  `
})
export class SiblingAComponent {
  someData = "Hello from Sibling A's instance!";

  getUpdatedData() {
    return "Updated data from Sibling A!";
  }
}

Sibling B Component is the same as in Method 1 (uses @Input to receive sharedData)

###适用场景：

• The parent needs to trigger data transfer on demand (like a button click)
• Sibling A holds data that doesn’t emit events (you can’t use @Output)
• You need direct access to a sibling’s methods or properties

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