Angular RXJS Observables 或 Subjects 在内部传递数字

Question

在 Angular 5 应用程序（没有 API）中传递数字的正确 RXJS 方法是什么？

我已成功传递主题为布尔值：

服务：

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class IsOpened {

  data = new Subject();

  constructor() {}

  insertData(data){
    this.data.next(data);
  }
}

发射器：

toggle(){
    this.opening = !this.opening;
    this._isOpened.insertData(this.opening);
}

听众：

ngAfterViewInit() {
    this._isOpened.data.subscribe((value) => {
      if(value) this.opened = true;
      else this.opened = false;
    }});
}

我在监听器中有点作弊，因为我不存储接收到的值，而是评估它并重新创建布尔值。

对我有用并且只适合很少的几行。

我不能对数字做同样的事情。

我该如何处理数字？用数组？

Google 和许多 RXJS 信息源一无所获。

Answer 1

这里是一个如何对对象使用 Subject/BehaviorSubject 的例子。同样的技术也适用于数字。

服务

export class ProductService {
    private products: IProduct[];

    // Private to encapsulate it and prevent any other code from
    // calling .next directly
    private selectedProductSource = new BehaviorSubject<IProduct | null>(null);

    // Publicly expose the read-only observable portion of the subject
    selectedProductChanges$ = this.selectedProductSource.asObservable();

    changeSelectedProduct(selectedProduct: IProduct | null): void {
        this.selectedProductSource.next(selectedProduct);
    }
}

组件设置值

  onSelected(product: IProduct): void {
    this.productService.changeSelectedProduct(product);
  }

在这种情况下，当用户在一个组件中选择某些内容时，该选择会广播给其他几个组件。

读取值的组件

ngOnInit() {
    this.productService.selectedProductChanges$.subscribe(
        selectedProduct => this.product = selectedProduct
    );
}

在本例中，读取值的组件将其存储到自己的局部变量中。该变量用于绑定，UI 会根据所选产品发生变化。

注意：您可以使用没有 subject/behavior 主题的 getters/setters 实现此 SAME 功能。

我有一个使用 Subject/BehaviorSubject 的完整示例：https://github.com/DeborahK/Angular-Communication/tree/master/APM-Final

与完全相同的功能 getters/setters 而不是 Subject/BehaviorSubject 此处：https://github.com/DeborahK/Angular-Communication/tree/master/APM-FinalWithGetters

Angular RXJS Observables 或 Subjects 在内部传递数字

Angular RXJS Observables or Subjects passing numbers Internally

observable

rxjs

subject-observer

behaviorsubject

angular