[英]angular behavioral subjects and subscribing in component
我在导航栏中有两个独立的下拉菜单。 假设一个是上课,另一个是给老师。 现在,在我的学生组件中,我要预订这两个下拉值,即,当任何一个下拉值更改时,学生组件都应重新加载并根据选择显示行为。
在我的组件中,我正在做:
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来监听这两个可观察到的变化吗? 如果您可以通过示例进行解释,将不胜感激。
请使用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
您必须创建一个新的Shared服务(例如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);
}
并且应该在您的老师和学生组件中进行更新
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.