在角度上,我有这样的服务
private subject = new Subject<any>();
private vehicleSubject = new Subject<any>();
sendData = (data: any) => this.subject.next({ data });
sendVehicleData = (data: any) => this.vehicleSubject.next({ data });
getData = (): Observable<any> => this.subject.asObservable();
getVehicleData = (): Observable<any> => this.vehicleSubject.asObservable();
现在我在sidebar(parent)
中拥有tab view
的{{1}}组件,primeng
{{user?.fullName}}
服务与检查-> 检查工作->
在打开sidebar.component.html
并在sidebar.component.ts
之外单击用户的sidebar
中,这样我会将数据像这样粘贴到我的子组件中
sidebar
在我的 onSidebarOutside(e) {
if (this.index === 0 && this.sideBarVisible &&
!this.isCustomerCancelBtnClicked) {
e.target.value = true;
this.verifyCustomer = e;
} else if(this.index === 1){
console.log('in index 1');
this.dataService.sendVehicleData(true);
}
if (this.isCustomerCancelBtnClicked) {
this.isCustomerCancelBtnClicked = false;
}
}
内,我有一个vehicle-side-list.component
的订户来获取这样的数据
ngOnInit
但是问题是我的ngOnInit() {
this.dataService.getVehicleData().subscribe(obj => {
console.log('in vehicle item subscruber', obj);
});
}
中的订户多次调用,而我多次获得了此日志vehicle-side-list.component
。我不明白为什么要多次打电话。我只发送一次值,并且通过console.log('in vehicle item subscruber', obj);
组件发送值,它多次调用。
我的组件调用结构是这样的
sidebar
我想将数据从sidebar
-customer-component
-appointment-component
-vehicle-component
-appointment-component
-inspection-component
-appointment-component
传递到sidebar
我在这里做错什么了?
答案 0 :(得分:3)
似乎您尚未取消订阅ngDestroy内部的Observable方法。
无论何时单击,都将添加新组件,这将为该可观察对象添加更多侦听器。只需取消订阅子组件ngDestroy中的可观察对象,它就可以正常工作。
您需要在子组件中进行以下更改。创建一个私有财产,并使用它取消订阅。
private destroy:Subject = new Subject();
ngOnInit() {
this.dataService.getVehicleData().pipe(
takeUntil(this.destroy) // import takeUntil from rxjs/operators.
).subscribe(obj => {
console.log('in vehicle item subscruber', obj);
});
}
ngDestroy() {
this.destroy.next();
}