Angular 5多数据共享Service实现示例及订阅问题咨询

Hey there! I see you've got a solid foundation with your DataService using RxJS Subject—great start! Let's break down exactly how to use it across your components and fix that incomplete subscription part.

First: Register the Service #

Before anything else, make sure you've registered your DataService in your Angular module (usually app.module.ts) so it's available as a singleton across your app:

import { NgModule } from '@angular/core';
import { DataService } from './data.service';

@NgModule({
  providers: [DataService] // Add the service here to make it a singleton
})
export class AppModule { }

Step 1: Send Data from a Component #

In any component where you want to pass data (like a form or list component), inject the DataService and call sendData() when you need to broadcast data:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-sender',
  template: `<button (click)="sendSelectedPhone()">Send Phone Number</button>`
})
export class SenderComponent {
  constructor(private dataService: DataService) { }

  sendSelectedPhone() {
    const phoneToSend = "+1234567890"; // Replace with your actual data source
    this.dataService.sendData(phoneToSend);
  }

  // Optional: Clear data when component is destroyed
  ngOnDestroy() {
    this.dataService.clearData();
  }
}

Step 2: Complete Subscription in a Receiver Component #

This is the missing piece you're looking for. In the component that needs to receive the shared data, inject the service, subscribe to the data stream, and handle incoming values. Critical: Always unsubscribe to avoid memory leaks!

Here's the full implementation:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from './data.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-receiver',
  template: `<div class="phone-display">Received Phone: {{ receivedPhone }}</div>`
})
export class ReceiverComponent implements OnInit, OnDestroy {
  receivedPhone: string;
  private dataSubscription: Subscription;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    // Subscribe to the data stream
    this.dataSubscription = this.dataService.getData().subscribe(phone => {
      this.receivedPhone = phone;
      // Add your custom logic here (update UI, trigger API calls, etc.)
      if (phone) {
        console.log("New phone data received:", phone);
      } else {
        console.log("Data stream cleared");
        this.receivedPhone = ""; // Reset display when data is cleared
      }
    });
  }

  ngOnDestroy() {
    // Unsubscribe to prevent memory leaks
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
  }
}

Key Tips for Smooth Usage #

• Singleton Guarantee: Registering the service in the root module ensures all components use the same instance—this is what makes the data sharing work.
• Subject vs BehaviorSubject: If you want new subscribers to receive the last emitted value (even if they subscribe after the data was sent), swap Subject for BehaviorSubject (initialize it with a default value like new BehaviorSubject<any>(null)).
• Memory Leak Prevention: Never skip unsubscribing in ngOnDestroy()—this is essential for components that get destroyed and recreated (like routed components).

内容的提问来源于stack exchange，提问作者ch.45