在具有RxJS的角度2中的两个不同组件中订阅相同的流,可以通过以下步骤实现:
Subject
或BehaviorSubject
来创建一个可观察对象。subscribe
方法来订阅流,并在回调函数中处理流的数据。subscribe
方法来订阅流,并在回调函数中处理流的数据。这样,两个组件就可以同时订阅相同的流,并独立地处理流的数据。
下面是一个示例代码:
在共享的文件(shared.service.ts)中创建共享的可观察对象:
import { Subject } from 'rxjs';
export const sharedStream$ = new Subject<any>();
在第一个组件中订阅流:
import { sharedStream$ } from 'shared.service';
@Component({
// component configuration
})
export class Component1 implements OnInit, OnDestroy {
private subscription: Subscription;
ngOnInit() {
this.subscription = sharedStream$.subscribe(data => {
// 处理流的数据
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
在第二个组件中订阅流:
import { sharedStream$ } from 'shared.service';
@Component({
// component configuration
})
export class Component2 implements OnInit, OnDestroy {
private subscription: Subscription;
ngOnInit() {
this.subscription = sharedStream$.subscribe(data => {
// 处理流的数据
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
这样,无论在哪个组件中发出数据到sharedStream$
流,两个组件都能够接收到并处理相同的数据。
云+社区技术沙龙[第7期]
DB・洞见
云+社区技术沙龙[第15期]
云+社区技术沙龙[第22期]
云+社区技术沙龙[第28期]
领取专属 10元无门槛券
手把手带您无忧上云