Angular 9：可观察的 Getter 返回对象而不是来自 BehaviorSubject 的布尔值

Question

如果此问题发布在 Stack Overflow 上的某个地方，我深表歉意，但我找不到适合我的答案。

我有一个 BehaviorSubject，它以布尔值的形式跟踪状态。我还有一个公共 getter 方法，它是一个返回 BehaviorSubject 的 Observable。我这样做是为了不仅可以订阅 BehaviorSubject 值的更改，还可以在当前值未更改时获取当前值。虽然我能够从订阅中获得正确的值，但在调用 getter 时我得到了一个返回的对象。我希望它返回最后一个值。

我尝试过使用 .getValue()，它似乎不起作用，我尝试过 .value，它似乎确实有效，但在 IDE 中引发错误。

我创建了一个非常基本的示例来说明我正在尝试完成的工作，并将 cmets 放入 my.service.ts 文件中以显示我的目标。请指教。谢谢！

编辑：我默认使用堆栈闪电战中的内容，并将 getter 分配给 name 变量只是为了查看它。我的目标是获得价值，以便我可以根据价值是真还是假来做一些事情。我确定我错过了一些非常简单的东西。

编辑：根据要求向问题添加代码

编辑：我还添加了 .subscribe 以表明虽然我了解 Observables 的工作方式，但如果可能的话，我还想使用相同的 getter 检查值更改的外部值。

我的服务

import { Observable, BehaviorSubject } from "rxjs";

export class MyService {

  constructor() {}

  private _isBoolean = new BehaviorSubject<boolean>(false);

  public get isBoolean(): Observable<boolean> {
    //return this._isBoolean.value; // Returns boolean, but throws error "Type 'boolean' is not assignable to type 'Observable<boolean>'."
    return this._isBoolean; // Returns object, but I want the value
  }

}

应用组件

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name;

  constructor(private _myservice: MyService) {
    this._myservice.isBoolean.subscribe(val => {
      console.log("value from subscribe: " + val)
    })

    this.name = this._myservice.isBoolean;
    if (this._myservice.isBoolean) {
      console.log("true!");
    } else if (!this._myservice.isBoolean) {
      console.log("false!");
    }
  }
}

https://stackblitz.com/edit/angular-hhdgrc

Answer 1

您以错误的方式使用Observables。请将subscribe 呼叫添加到observable：

this._myservice.isBoolean.subscribe((val) => {
    this.name = val;
    console.log("value: " + val);
});

---

你可以在subscribe回调中添加代码来使用变化的值：

已编辑app.component.ts

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name;

  constructor(private _myservice: MyService) {
    this._myservice.isBoolean.subscribe(val => {
      console.log("value from subscribe: " + val);


      this.name = val ;
      if (val) {
        console.log("true!");
      } else if (!val) {
        console.log("false!");
      }
    })

  }
}

Answer 2

正确的方式使用Boolean BehaviorSubject：-

这样定义：-

_isBoolean: BehaviorSubject<boolean> = new BehaviorSubject(false);

像这样更新：-

this._isBoolean.next(true); //  for true
this._isBoolean.next(false); // for false

读取其他组件中的值：-

this._isBoolean.subscribe(value => {
console.log(value);
    });

立即读取当前值一次：-

this._isBoolean.asObservable().pipe(take(1)).subscribe(value => {
    console.log(value);
  });

Answer 3

问题在于应用程序的 html 部分，该服务返回一个模板必须订阅的 observable。为此，您必须将异步管道添加到模板变量

将异步管道添加到 app component.html 变量。这样就可以了

<hello name="{{ name|async }}"></hello>

Answer 4

感谢 Rahmat Ali 引导我找到我需要的答案。我在这里提供一个答案，以便更容易找到，提供一个更简单的解决方案示例，以及更好的解释。

我想要一个 getter 函数，它允许我订阅对 BehaviorSubject 值的更改，还能够根据当前需要在不订阅的情况下获取当前值。

它不起作用的原因是在另一个示例中，我让 getter 返回 Observable 类型而不是 BehaviorSubject 类型。所以，我在控制台中得到了一个“真实”的结果，因为我正在检查它的存在而不是布尔值。一旦改变了，我就可以使用 .value 属性访问 BehaviorSubject 的布尔值。

这是解决方案的简化示例（注意：getter 是不必要的，因为一旦 getter 返回 BehaviorSubject，我可以使用 .next 更改其值而无需创建 setter）：

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  private _isBooleanSubejct = new BehaviorSubject<boolean>(false);

  public get isBoolean(): BehaviorSubject<boolean> {
    return this._isBooleanSubejct;
  }

  constructor() {
    console.log(this.isBoolean.value);
    this.isBoolean.subscribe(val => {
      console.log(val); // false until the timer completed
      console.log(this.isBoolean.value); // false until the timer completed
    });

    setTimeout(() => {
      this.isBoolean.next(true);
    }, 5000);
  }
}