rxjs - 如何根据值在 rxjs 中发出变化

Question

我可以让 observable 触发一次该值。但我希望它在变量的值发生变化时发生。实际上我需要一个观察者。这就是我认为 observable 的意义所在。观察事物的值(value)或状态并更新订阅它的任何内容。

无论如何，这是代码

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 的值发生变化时，我都希望订阅得到更新。在当前状态下，我得到一个控制台日志，然后什么也没有。我单击更新 bool 值的按钮，但观察者订阅者再也不会触发。

我是否错过了一些关键点，这不是我应该如何使用它？

而且我知道我可以将观察者绑定(bind)到按钮单击，但这不是我想要实现的方式。这将是一个服务级别示例。所以任何地方的任何东西都可以更新值(value)。

我已经阅读了一些主题，但我仍在学习。所以也许我应该做点什么？

谢谢

Answer 1

您想订阅并向可观察对象发送一个新值。在这种情况下，您需要一个 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);
  }
}