如何基于一个值在 RxJS 中触发变化

Question

我可以让observable在值变化时触发一次。但是我希望它在变量的值改变时每次都能触发。实际上，我需要一个监视器。这就是我认为observable的目的所在：观察值或状态，并更新任何已订阅的内容。

无论如何，以下是代码：

import { Component, OnInit } from '@angular/core';

var Rx = require('rxjs/Rx');

import { Subject } from "rxjs/Rx";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  private testBool: boolean = false;
  private observable;

  constructor() {  

    this.observable = Rx.Observable.of(this.testBool);

    this.observable.subscribe(
      (value) => console.log(value)
    )
  }

  toggleBool() {
    this.testBool = !this.testBool;

  }

}

每当this.testBool的值改变时，我希望subscribe能够得到更新。但是在当前状态下，我只得到一次console log，然后什么也没有了。我点击更新布尔值的按钮，但观察者订阅者再也不会触发。

我是否忽略了一些关键点，这不是我该如何使用它的方式？

我知道我可以将观察者绑定到按钮单击上，但这不是我想要实现的方式。这将是一个服务级别的示例。因此，任何地方都可以更新该值。

我已经了解了subjects，但我还在学习。所以也许我应该用它做些什么？

谢谢

- cphilpot

Answer 1

你想要订阅并发送新值到Observable。在这种情况下，你需要一个Subject。我们使用的是BehaviorSubject，在BehaviorSubject中你可以设置默认值。

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from "rxjs/Rx";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  private testBool: boolean = false;
  private observable: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  constructor() {  
    this.observable.subscribe((value) => console.log(value))
  }

  toggleBool() {
    this.testBool = !this.testBool;
    this.observable.next(this.testBool);
  }
}

- Robin Dijkhof

---

请添加您所做更改的解释以及原因。 - cartant

如果我将该可观察对象公开，并将该服务注入到另一个组件中，我就可以订阅该可观察对象，当应用程序中的其他组件调用该服务来切换该布尔值时，该组件将获得任何对该布尔值的更新？（如果表述不清，请见谅） - cphilpot

是的，但将主题移动到服务并将该服务注入两个组件中会更容易。 - Robin Dijkhof

感谢您的帮助，现在它完美地运行了。 在答案中，您正在导入Subject，但随后使用BehaviorSubject。更新一下就好了。 - cphilpot