MessageService 代码如下

import { Injectable } from '@angular/core';import { Subject } from 'rxjs';@Injectable({  providedIn: 'root'})export class MessageService {  private messageSource = new Subject
    
     ();  message$ = this.messageSource.asObservable();  messageAction(name: string) {    this.messageSource.next(name);  }}
    

发送消息的组件 代码如下

ts

import { Component} from '@angular/core';import { MessageService } from '../service/message.service';@Component({  selector: 'app-send',  templateUrl: './send.component.html',  styleUrls: ['./send.component.css']})export class SendComponent {  constructor(private messageService: MessageService) { }  sendMessage(action: string) {    this.messageService.messageAction(action);  }

html

action

接收消息的组件

ts

import { Component, OnInit, OnDestroy } from '@angular/core';import { MessageService } from './service/message.service';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit, OnDestroy {  action: string;  sub: Subscription;  ngOnInit(): void {    this.messageService.message$.subscribe(action => this.action = action);  }  ngOnDestroy(): void {    this.sub.unsubscribe(); //不要忘记取消订阅  }  constructor(private messageService: MessageService) {  }