棱角分明的行为主体和订阅组件

Question

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

在我的组件中，我正在做：

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来收听两个可观察到的变化吗？如果你能举例说明，我将不胜感激。

Answer 1

请使用RXJS:

import { combineLatest } from 'rxjs';
export class YourClass{
... 
public yourMethod()
{
combineLatest(teachers$, class$).subscribe((result) => {
// do your stuff
});
}
}

您可以在这里找到更多详细信息：

https://www.learnrxjs.io/operators/combination/combinelatest.html

Answer 2

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

import { BehaviorSubject } from "rxjs";

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

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);
}

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