该问题由于 BehaviorSubject 在订阅以前就已经发出了一次初始值,因此在其他组件中订阅时仅能接收到该值。以下是解决方法的代码示例:
在服务中定义 BehaviorSubject:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject("default message");
currentMessage = this.messageSource.asObservable();
changeMessage(message: string) {
this.messageSource.next(message);
}
}
在组件中订阅 BehaviorSubject 时,可以通过 take(1) 操作符只取一次值,从而避免接收到初始值:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-other-component',
template: `
{{ message }}
`,
styleUrls: ['./other-component.component.css']
})
export class OtherComponentComponent implements OnInit {
message: string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.pipe(take(1)).subscribe(message => this.message = message);
}
}
这样,在订阅时就可以避免接收到 BehaviorSubject 的初始值,而只接收到最新的值。