Angular Material跨组件数据传递：通过服务实现同级组件通信

Alright, let's get this cross-component data sharing sorted out for you. You want a service-based solution that feels as easy as using a global variable, but keeps your code clean and follows standard practices—here's exactly how to do it, step by step.

First, create a service in your services folder (let's name it DataSharingService). This service will act as the middleman between your components, using a reactive data stream to pass information. A BehaviorSubject is perfect here because it keeps track of the latest value and sends it to new subscribers right away.

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

@Injectable({
  providedIn: 'root' // This makes the service a singleton—one instance used across your entire app
})
export class DataSharingService {
  // Initialize with a default value (null works if you don't have initial data to pass)
  private userStatusStream = new BehaviorSubject<any>(null);
  // Expose an observable so components can't directly modify the underlying data stream
  currentUserStatus = this.userStatusStream.asObservable();

  constructor() { }

  // Call this method from your statususers component to send data
  updateUserStatus(statusData: any) {
    this.userStatusStream.next(statusData);
  }
}

In your statususers component, inject the shared service and call its updateUserStatus method whenever you need to send data to the hours component. You can tie this to a button click, form submission, or any other event that triggers data transfer.

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

@Component({
  selector: 'app-statususers',
  templateUrl: './statususers.component.html',
  styleUrls: ['./statususers.component.css']
})
export class StatususersComponent {
  constructor(private dataService: DataSharingService) { }

  // Example method to trigger data send
  sendStatusToHours() {
    // Replace this with your actual data—can be an object, array, string, or number
    const userStatus = {
      userId: 456,
      currentStatus: 'online',
      hoursLoggedToday: 8
    };
    // Send the data through the service
    this.dataService.updateUserStatus(userStatus);
  }
}

Over in your hours component, inject the same service and subscribe to the currentUserStatus observable to receive updates. Don't forget to unsubscribe when the component is destroyed to avoid memory leaks!

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

@Component({
  selector: 'app-hours',
  templateUrl: './hours.component.html',
  styleUrls: ['./hours.component.css']
})
export class HoursComponent implements OnInit, OnDestroy {
  receivedUserStatus: any;
  private statusSubscription: Subscription;

  constructor(private dataService: DataSharingService) { }

  ngOnInit() {
    // Subscribe to the data stream to get real-time updates
    this.statusSubscription = this.dataService.currentUserStatus.subscribe(status => {
      this.receivedUserStatus = status;
      // Do something with the data here—update your template, run calculations, etc.
      if (status) {
        console.log('Received status from statususers:', status);
      }
    });
  }

  ngOnDestroy() {
    // Clean up the subscription when the component is removed from the DOM
    this.statusSubscription.unsubscribe();
  }
}

• No messy global scope: Avoids naming conflicts and accidental data overrides that come with global variables
• Clear data flow: You can easily track exactly where data is sent from and received
• Testable: Services are straightforward to mock in unit tests, unlike global variables
• Async-friendly: If your data later comes from an API or async operation, this setup works seamlessly without major changes

If you're not using Angular, this pattern still applies! For React, you could use Context API with a reducer or a custom event bus. For vanilla JS, create a singleton class with event listeners and emitters—the core idea of a shared middleman service stays the same.

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