Angular 4/5组件数据传递：如何在组件实例间传值？

Hey there! Let's break down how to pass data between component instances in Angular 4 and Angular 5—since the core concepts are pretty consistent between these versions, with just a few targeted tweaks for the same-component scenario.

Angular 4: Passing Data Between Different Component Instances #

1. Shared Service with RxJS Subjects (Most Flexible for Unrelated Components) #

This is the go-to method when your components don't have a direct parent-child relationship (like siblings, or components in totally different parts of the app). Think of it as building a shared "message hub" that any component can send data to or listen for updates from.

First, create the shared service:

// data-sharing.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class DataSharingService {
  // Create a Subject to act as our data pipeline
  private dataSource = new Subject<any>();
  // Expose it as an observable so components can subscribe safely
  data$ = this.dataSource.asObservable();

  // Method to send data to the pipeline
  sendData(data: any) {
    this.dataSource.next(data);
  }
}

Then, in the component sending data:

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

@Component({
  selector: 'app-component-a',
  template: `<button (click)="sendMessage()">Send Data to Component B</button>`
})
export class ComponentAComponent {
  constructor(private dataService: DataSharingService) {}

  sendMessage() {
    this.dataService.sendData({ message: 'Hey from Component A!' });
  }
}

In the component receiving data:

// component-b.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataSharingService } from './data-sharing.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-component-b',
  template: `<p>Received data: {{ receivedData?.message }}</p>`
})
export class ComponentBComponent implements OnInit, OnDestroy {
  receivedData: any;
  private subscription: Subscription;

  constructor(private dataService: DataSharingService) {}

  ngOnInit() {
    // Subscribe to the data stream
    this.subscription = this.dataService.data$.subscribe(data => {
      this.receivedData = data;
    });
  }

  ngOnDestroy() {
    // Always unsubscribe to avoid memory leaks!
    this.subscription.unsubscribe();
  }
}

2. @Input() and @Output() (For Parent-Child Relationships) #

Use this when you have a clear parent-child hierarchy—one component is nested directly inside the other. @Input() lets the parent pass data down to the child, and @Output() lets the child send events (and data) back up to the parent.

Parent component example:

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [parentMessage]="greeting" (childEvent)="handleChildResponse($event)"></app-child>
    <p>Message from child: {{ childReply }}</p>
  `
})
export class ParentComponent {
  greeting = 'Hello from Parent!';
  childReply: string;

  handleChildResponse(message: string) {
    this.childReply = message;
  }
}

Child component example:

// child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>Data from parent: {{ parentMessage }}</p>
    <button (click)="sendReply()">Send Message to Parent</button>
  `
})
export class ChildComponent {
  @Input() parentMessage: string;
  @Output() childEvent = new EventEmitter<string>();

  sendReply() {
    this.childEvent.emit('Hey right back from Child!');
  }
}

3. Route Parameters (For Router-Loaded Components) #

Perfect for when you're navigating between components via the Angular Router and need to pass data along with the navigation (like an item ID for a detail page).

First, set up the route with a parameter:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ComponentAComponent } from './component-a.component';
import { ComponentBComponent } from './component-b.component';

const routes: Routes = [
  { path: 'component-a', component: ComponentAComponent },
  { path: 'component-b/:itemId', component: ComponentBComponent } // Define the parameter
];

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

Navigate to the component and pass the parameter:

// component-a.component.ts
import { Router } from '@angular/router';

// ...
constructor(private router: Router) {}

navigateToDetail() {
  this.router.navigate(['/component-b', 456]); // Pass itemId=456
}

Retrieve the parameter in the target component:

// component-b.component.ts
import { ActivatedRoute } from '@angular/router';

// ...
constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const itemId = params.get('itemId');
    console.log('Received item ID:', itemId);
  });
}

Angular 5: Passing Data Between Two Instances of the Same Component #

Even though they're the same component class, each instance has its own isolated state—you can't just share variables directly. The shared service with RxJS Subjects is still the most reliable approach here, as it acts as an external bridge between the instances.

We can reuse the same DataSharingService from earlier. Here's how the component would look:

// my-component.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataSharingService } from './data-sharing.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="component-instance">
      <input type="text" [(ngModel)]="inputText" placeholder="Type a message">
      <button (click)="sendToOtherInstance()">Send to Other Instance</button>
      <p>Received from other instance: {{ receivedText }}</p>
    </div>
  `
})
export class MyComponentComponent implements OnInit, OnDestroy {
  inputText: string;
  receivedText: string;
  private subscription: Subscription;

  constructor(private dataService: DataSharingService) {}

  ngOnInit() {
    this.subscription = this.dataService.data$.subscribe(data => {
      this.receivedText = data.message;
    });
  }

  sendToOtherInstance() {
    this.dataService.sendData({ message: this.inputText });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Then, in your parent template, just render two instances:

<!-- parent.component.html -->
<app-my-component></app-my-component>
<app-my-component></app-my-component>

Now, typing in one instance and clicking the button will send the message to the other instance instantly.

If your two instances are in a parent-child hierarchy, you could also use @Input()/@Output(), but the service approach is far more scalable regardless of their relationship.

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