在Angular中使用BehaviourSubject实现两个组件之间的通信

import { BehaviorSubject } from 'rxjs';

export class DataService {
  private messageSource = new BehaviorSubject<string>(''); // 初始化一个空字符串作为初始值
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

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

@Component({
  selector: 'app-sender',
  template: `
    <input type="text" [(ngModel)]="message">
    <button (click)="sendMessage()">Send</button>
  `
})
export class SenderComponent {
  message: string;

  constructor(private dataService: DataService) {}

  sendMessage() {
    this.dataService.changeMessage(this.message);
  }
}

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

@Component({
  selector: 'app-receiver',
  template: `
    <p>{{ message }}</p>
  `
})
export class ReceiverComponent implements OnInit {
  message: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.currentMessage.subscribe(message => {
      this.message = message;
    });
  }
}