角度行为主题和订阅组件答案

【问题标题】：angular behavioral subjects and subscribing in component角度行为主题和订阅组件
【发布时间】：2018-10-30 11:25:18
【问题描述】：

我在导航栏中有两个独立的下拉菜单。让我们说一个用于课堂，另一个用于教师。现在，在我的学生组件中，我想订阅这两个下拉值，即当任一下拉值更改时，学生组件应重新加载并根据选择显示行为。

在我正在做的组件中：

export class Student{
    sub1: Subscription;
    sub2: Subscription;
    constructor(navbar: NavbarService){
        this.sub1 = this.navbar.teacher$.subscribe(
            method1();
        )
        this.sub2= this.navbar.class$.subscribe(
            method1();
        )
    }

    method1(){//implementation}
}

这是正确的方法吗？我可以使用一个参考，即只有 sub1 来听两个可观察到的变化吗？如果您能举例说明，将不胜感激。

【问题讨论】：

试试这个：learnrxjs.io/operators/combination/combinelatest.html

标签： angular typescript ecmascript-6 rxjs angular6

【解决方案1】：

请使用 RXJS：

import { combineLatest } from 'rxjs';

export class YourClass{

   ... 

   public yourMethod()
   {
       combineLatest(teachers$, class$).subscribe((result) => {

          // do your stuff
       });
   }

}

【讨论】：

谢谢我正在寻找的东西

【解决方案2】：

您必须创建一个新的共享服务，例如 shared.service.ts，以便在两个组件之间共享数据，然后在您的 shared.service.ts 中导入 BehaviorSubject

import { BehaviorSubject } from "rxjs";

创建一个新的 Behavior Subject 变量来更改值以及您的组件可以在您的共享服务中订阅的另一个变量。

value = new BehaviorSubject<any>(null);
_value = this.value.asObservable();

还添加一个函数来添加下一个值

nextValue(data) {
  this.value.next(data);
}

在您的教师和学生组件中导入您的共享服务并创建一个变量来保存数据

import { SharedService } from '../services/shared.service'; // where you put your 
                                                            //services

sub1; // hold your data here

constructor(private shared: SharedService) {
  shared._value.subscribe(r => this.sub1 = r); // subscribe here
}

然后如果您想更改值，只需使用

method( newValue ) {
  this.shared.nextValue(newValue);
}

它应该在你的教师和学生组件中更新

【讨论】：