可以使用 Angular 的 Subject 类来解决此问题。Subject 可以让多个 Observers 同时接收到同一个 Observable 的数据流。
在发出 Observable 数据的组件中创建一个 Subject:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private messageSource = new Subject();
currentMessage = this.messageSource.asObservable();
changeMessage(message: string) {
this.messageSource.next(message)
}
}
在接收 Observable 数据的组件中订阅 Subject:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-component-b',
templateUrl: './component-b.component.html',
styleUrls: ['./component-b.component.css']
})
export class ComponentBComponent implements OnInit {
message: string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}
这样,即可在多个组件中同时使用一个数据流。当在发出 Observable 数据的组件中调用 changeMessage 方法时,接收 Observable 数据的组件会同时接收到相应的数据。