Angular 4中如何通过服务实现多组件间的数据传递与展示

没问题，我来帮你把这个组件间数据传递的方案补全！你已经用了Subject来做消息传递，这思路很对，接下来咱们一步步完善整个流程，适配三个组件的场景：一个组件负责发送数据，另外两个负责接收并展示。

1. 完善你的GlobalServiceService #

先把你写了一半的服务补全，给方法起个更语义化的名字，让整个消息传递逻辑更清晰：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class GlobalServiceService {
  // 用Subject作为消息载体，实现发布-订阅模式
  private _messageSubject = new Subject<any>();

  // 供接收组件订阅消息流的方法
  getMessage(): Observable<any> {
    return this._messageSubject.asObservable();
  }

  // 供发送组件发布消息的方法
  sendMessage(data: any) {
    this._messageSubject.next(data);
  }

  // 可选：添加清空消息的方法，需要时调用
  clearMessage() {
    this._messageSubject.next();
  }
}

2. 在AppModule中注册全局服务 #

Angular 4里要确保服务是全局单例，直接把它加到AppModule的providers数组里就行：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 要加这个才能用ngModel

// 导入你的三个组件和服务
import { GlobalServiceService } from './global-service.service';
import { SenderComponent } from './sender/sender.component';
import { ReceiverComponent1 } from './receiver1/receiver1.component';
import { ReceiverComponent2 } from './receiver2/receiver2.component';

@NgModule({
  imports: [BrowserModule, FormsModule], // 注意导入FormsModule
  declarations: [SenderComponent, ReceiverComponent1, ReceiverComponent2],
  providers: [GlobalServiceService], // 注册全局服务
  bootstrap: [SenderComponent] // 可根据你的项目结构调整根组件
})
export class AppModule { }

3. 实现发送数据的组件（SenderComponent） #

这个组件负责收集用户输入，然后通过服务把数据发出去：

组件类（sender.component.ts） #

import { Component } from '@angular/core';
import { GlobalServiceService } from '../global-service.service';

@Component({
  selector: 'app-sender',
  templateUrl: './sender.component.html'
})
export class SenderComponent {
  inputContent: string = '';

  constructor(private globalService: GlobalServiceService) { }

  sendData() {
    // 可以传递字符串、对象等任意类型数据，这里用对象封装更灵活
    this.globalService.sendMessage({ content: this.inputContent });
    // 发送后清空输入框（可选操作）
    this.inputContent = '';
  }
}

组件模板（sender.component.html） #

<div style="margin-bottom: 20px;">
  <input type="text" [(ngModel)]="inputContent" placeholder="输入要传递的内容">
  <button (click)="sendData()" style="margin-left: 10px;">发送数据</button>
</div>

4. 实现第一个接收组件（ReceiverComponent1） #

订阅服务的消息流，拿到数据后展示：

组件类（receiver1.component.ts） #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { GlobalServiceService } from '../global-service.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-receiver1',
  templateUrl: './receiver1.component.html'
})
export class ReceiverComponent1 implements OnInit, OnDestroy {
  receivedData: any;
  private messageSubscription: Subscription;

  constructor(private globalService: GlobalServiceService) { }

  ngOnInit() {
    // 订阅消息，接收数据
    this.messageSubscription = this.globalService.getMessage().subscribe(data => {
      if (data) {
        this.receivedData = data;
      }
    });
  }

  ngOnDestroy() {
    // 组件销毁时必须取消订阅，防止内存泄漏
    this.messageSubscription.unsubscribe();
  }
}

组件模板（receiver1.component.html） #

<div style="border: 1px solid #4285F4; padding: 10px; margin-bottom: 10px;">
  <h3>接收组件1</h3>
  <p>收到的内容：{{ receivedData?.content || '暂无数据' }}</p>
</div>

5. 实现第二个接收组件（ReceiverComponent2） #

逻辑和第一个接收组件一致，只是展示样式可以区分开：

组件类（receiver2.component.ts） #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { GlobalServiceService } from '../global-service.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-receiver2',
  templateUrl: './receiver2.component.html'
})
export class ReceiverComponent2 implements OnInit, OnDestroy {
  receivedData: any;
  private messageSubscription: Subscription;

  constructor(private globalService: GlobalServiceService) { }

  ngOnInit() {
    this.messageSubscription = this.globalService.getMessage().subscribe(data => {
      this.receivedData = data;
    });
  }

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

组件模板（receiver2.component.html） #

<div style="border: 1px solid #EA4335; padding: 10px;">
  <h3>接收组件2</h3>
  <p>最新消息：{{ receivedData?.content || '等待数据...' }}</p>
</div>

6. 在根组件中整合所有组件 #

比如在app.component.html里引入三个组件，就能看到实时传递效果：

<app-sender></app-sender>
<app-receiver1></app-receiver1>
<app-receiver2></app-receiver2>

关键注意事项 #

• 取消订阅：所有订阅了Subject的组件，在ngOnDestroy里一定要取消订阅，避免内存泄漏。
• 数据类型：你可以传递任意类型的数据（对象、数组、字符串等），只要订阅时对应处理即可。
• 单例服务：确保服务是全局单例，这样所有组件共享同一个Subject实例，才能实现数据共享。

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