获取可观察对象当前值的简单方法（从行为主体获取）

Question

这个问题看起来很长，但应该是一个很基础的rxjs问题。如果可以的话请帮忙。

我正在编写一个 Angular 7 应用程序，其中包含如下服务、组件和模板，我想以一种简单的方式访问可观察量的最后一个值。

SoundMeter服务

在服务中，我有一个私有的行为主体，我用它来使用“下一步”发出值。我使用. as观察（）将此行为主体暴露给消费者，以防止消费者执行. Next（）并发出新值。在服务中，我使用. value访问listeningStastus主题的当前值。

export type SoundMeterStatus    = 'noResults' | 'isRunning' | 'hasResults';

export class SoundMeterService {
    private listeningStatusSubject: BehaviorSubject<SoundMeterStatus> = new BehaviorSubject<SoundMeterStatus>('noResults');
    get listeningStatus()   { return this.listeningStatusSubject.asObservable(); }

    // somewhere in the code I emit a different value
    someFunc() {
        if (this.listeningStatusSubject.value === 'noResults' )
            this.listeningStatusSubject.next('isRunning');
    }
}

声音测量组件

遵循可观察量的最佳实践，在组件中，我使用直接访问服务的可观察量（通过 listeningStatus getter），以便在模板中自动订阅和取消订阅（见下文）。

export class SoundMeterComponent {
    serviceListeningStatus$ = this.sms.listeningStatus;

    constructor(
        private sms: SoundMeterService
    ) {}

    ngOnInit() {
        // I want to check the value of listeningStatus in a simple way without pulling the value out and saving it locally in SoundMeterComponent
    }
}

SoundMeter模板

我使用Angular的异步管道，这样当组件被销毁时，它可以自动订阅和取消订阅可观察对象(以避免这里提到的手动订阅)

<div *ngIf="(serviceListeningStatus | async) === 'noResults' ">
    <span>some text</span>
</div>

我的问题

这种方法非常有效。但是我想在ngOnInit（）中以简单的方式检查listeningState的值，而无需将值提取出来并将其本地保存在SoundMeter Component中，也无需公开行为主题listeningStastus本身以使用. value检查其值，如下所述：

1） 从服务中提取值并将其保存在SoundMeterComponent中：

声音测量组件

export class SoundMeterComponent {
        serviceListeningStatus$ = this.sms.listeningStatus;
        private serviceListeningStatus;

        constructor(
            private sms: SoundMeterService
        ) {}

        ngOnInit() {
            // Pulling the value from the service:
            this.sms.listeningStatus.subscribe( status => this.serviceListeningStatus = status ); // I'm trying to avoid this

            if (this.serviceListeningStatus === 'noResults' ) {
                displayNoResultsMessage();
            }
        }
    }

2）公开行为主体本身并使用. value检查其值，如下所示：

SoundMeter服务

export class SoundMeterService {
    private listeningStatus: BehaviorSubject<SoundMeterStatus> = new BehaviorSubject<SoundMeterStatus>('noResults');
    get listeningStatus()   { return this.listeningStatus; }

}

声音测量组件

export class SoundMeterComponent {
    serviceListeningStatus = this.sms.listeningStatus;

    constructor(
        private sms: SoundMeterService
    ) {}

    ngOnInit() {
        if (this.sms.listeningStatus === 'noResults' ) {
            displayNoResultsMessage();
        }
    }
}

SoundMeter模板

<div *ngIf="(serviceListeningStatus.asObservable() | async) === 'noResults' ">
    <span>some text</span>
</div>

请帮我理解哪种方法更好，同时保持干净和简单的代码。我知道有很多关于如何从行为主题中获取值的问题，比如使用rxjs5获取行为主题当前值的简单方法或如何获取RxJS主题或可观察的当前值？，但请注意这是一个不同的问题。谢谢！

Answer 1

就我所能理解的你的问题而言，我可能首先会质疑行为主题的用法。RxJs虽然很棒，但并不适合每个用例，你的可能就是其中之一。. value的用法是对imo的指示。

在SoundMeter Service中使用一个简单的不可观察变量来保持状态可能会解决您的所有问题。

如果您不想这样做，我的建议是尝试如下方法：您的流程中有几个地方您想要检查 listeningStatus 并且您可以选择使用 tap 运算符并在一个地方对所有选项（不仅是“noResults”）执行副作用？

例：

export class SoundMeterComponent {
    serviceListeningStatus$ = this.sms.listeningStatus.pipe(
        tap((status) => {
            if (value === 'noResults') {
                displayNoResultsMessage();
            }
            if (value === 'xxx') {
                doXXXStuff();
            }
        })
    );

    constructor(private sms: SoundMeterService) {}

    ngOnInit() {}
}

然后模板订阅serviceListeningStatus$：

<div *ngIf="(serviceListeningStatus$ | async) === 'noResults' ">
    <span>some text</span>
</div>

我认为你的问题是一个很好的例子，对于想要做 RxJs 的应用程序来说，因为它很棒，但由于 Angular 框架中缺乏对响应式方法的完全支持，你不能完全响应式。我正在考虑ngOnInit或用户进行的点击事件。如果你想使用RxJs，看看ngx-template-stream或这个伟大的建议可能会有所帮助。

干杯克里斯

Answer 2

恐怕你必须订阅这个.sms.listeningStatus，这就是可观察性的工作原理。如果您想坚持使用真正的异步方法处理数据，就没有解决方法。您唯一能做的就是将订阅移到其他地方（例如，使用异步管道将其移到模板）

Answer 3

始终可以将async/await与ngOnInit结合使用

async ngOnInit = () => {
  const currentValue = await this.sms.listeningStatus.pipe(take(1)).toPromise();

  // do stuff with currentValue here
}

（注意：在将热可观察量转换为promise时，请始终使用 take（1） - 否则它们永远不会解析，因为您需要在promise解析之前完成可观察量）。