该问题的解决方法是使用订阅方法来观察BehaviorSubject的变化并反映到实际的组件中。下面是一个代码示例:
import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
private messageSource = new BehaviorSubject('default message');
currentMessage = this.messageSource.asObservable();
constructor() { }
ngOnInit(): void {
this.currentMessage.subscribe(message => console.log(message));
}
changeMessage() {
this.messageSource.next('message changed');
}
}
在此示例中,我们使用了BehaviorSubject来创建一个观察者。我们还使用了asObservable()方法使其对组件外部不可见。在ngOnInit()钩子函数中,我们订阅了currentMessage。在组件中有一个名为changeMessage()的方法,它使用messageSource的next()方法来更新观察者的值。
在HTML模板中,我们可以使用async管道来订阅currentMessage。从而实时反映messageSource的值。
{{ currentMessage | async }}
通过此方式,我们可以轻松地访问BehaviorSubject的值,并在组件中反映其变化状态。