Angular 6：如何通过服务将消息从组件传递到消息组件？

我来帮你搞定这个组件传值的问题～你当前的消息服务只是简单返回参数，没法实现组件间的实时通知，得借助RxJS的可观察对象来实现跨组件通信，具体步骤如下：

1. 重构你的消息服务（message.service.ts） #

我们用BehaviorSubject来保存消息状态，它能让订阅的组件实时收到最新消息，同时新组件订阅时也能拿到当前的最新值：

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

@Injectable({
  providedIn: 'root' // 确保服务是全局单例，所有组件共享同一个实例
})
export class MessageService {
  // 初始化一个BehaviorSubject，默认值设为空字符串
  private messageSource = new BehaviorSubject<string>('');
  // 对外暴露可观察对象，避免外部直接修改数据源
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  // 定义发送消息的方法，更新BehaviorSubject的值
  sendMessage(message: string) {
    this.messageSource.next(message);
  }
}

2. 修改app.component.ts的消息发送逻辑 #

把原来调用message()的代码改成调用服务的sendMessage()方法：

import { Component } from '@angular/core';
import { MessageService } from './message.service'; // 注意路径要和你的文件结构匹配

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private myservice: MessageService) { }

  sendMessageToService() {
    this.myservice.sendMessage('my Message to be displayed in the messageComponent');
  }
}

3. 改造MessageComponent接收并显示消息 #

有两种方式可以实现，选一种你喜欢的就行：

方式一：手动订阅 + 销毁时取消订阅 #

这种方式适合需要在组件里对消息做额外处理的场景：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MessageService } from '../message.service'; // 路径根据你的项目结构调整
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-messagecomponent',
  templateUrl: './messagecomponent.component.html',
  styleUrls: ['./messagecomponent.component.css']
})
export class MessageComponent implements OnInit, OnDestroy {
  message: string = '';
  private messageSubscription?: Subscription;

  constructor(private messageService: MessageService) { }

  ngOnInit(): void {
    // 订阅消息服务的可观察对象，实时更新组件的message变量
    this.messageSubscription = this.messageService.currentMessage.subscribe(
      (newMessage) => {
        this.message = newMessage;
      }
    );
  }

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

然后在messagecomponent.component.html里直接绑定变量：

<p>{{ message }}</p>

方式二：使用Async管道（更简洁） #

Angular的Async管道会自动帮你订阅和取消订阅，省去手动管理的麻烦：

import { Component } from '@angular/core';
import { MessageService } from '../message.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-messagecomponent',
  templateUrl: './messagecomponent.component.html',
  styleUrls: ['./messagecomponent.component.css']
})
export class MessageComponent {
  // 直接把服务的可观察对象赋值给组件变量
  currentMessage$: Observable<string> = this.messageService.currentMessage;

  constructor(private messageService: MessageService) { }
}

模板里用Async管道处理：

<p>{{ currentMessage$ | async }}</p>

最后检查点 #

• 确保你在app.module.ts里没有重复声明MessageService（因为已经用providedIn: 'root'全局注册了）
• 确认app.component.html里的<app-messagecomponent></app-messagecomponent>标签位置正确，能被渲染到页面上

这样操作后，当你调用sendMessageToService()方法时，消息就会实时显示在MessageComponent里啦～

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