【发布时间】：2017-04-12 15:55:49
【问题描述】：
我已经在我的应用程序中多次这样做了。这很简单，它应该可以工作......但这次不行。
我的问题：
我正在从组件 A 调用服务中的方法，我的组件 B 已订阅但没有反应也没有收到任何东西。 subscribe() 没有触发！
navigation-elements.service.ts
@Injectable()
export class NavigationElementsService {
updateIBOsNavigation$: Observable<any>;
private updateIBOsNavigationSubject = new Subject<any>();
constructor() {
this.updateIBOsNavigation$ = this.updateIBOsNavigationSubject.asObservable();
}
updateIBOsNavigation(navigationData) {
log.d('updateIBOsNavigation', JSON.stringify(navigationData));
this.updateIBOsNavigationSubject.next(navigationData);
}
}
IboDetailsGeneral 组件
export class IboDetailsGeneral implements OnInit, OnDestroy {
id: string;
private sub: any;
constructor(private route: ActivatedRoute, private iboService: IBOsService, private navigationService: NavigationElementsService) {
this.sub = this.route.params.subscribe(params => {
this.id = params['id'];
console.log('CALLING updateIBOsNavigation FUNCTION');
this.navigationService.updateIBOsNavigation(this.id);
});
}
ngOnInit() {
console.log('CALLING updateIBOsNavigation FUNCTION AGAIN');
this.navigationService.updateIBOsNavigation('test');
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
该组件触发服务的方法：updateIBOsNavigation。
IBOsNavigationElement 组件
export class IBOsNavigationElement implements OnInit {
private id: string;
constructor(private navigationService: NavigationElementsService) {
this.navigationService.updateIBOsNavigation$.subscribe((navigationData) => {
log.d('I received this Navigation Data:', JSON.stringify(navigationData));
this.id = navigationData;
}
);
}
ngOnInit() {
}
}
此组件已订阅，它应该列出并接收数据...
让我们整理一下 DI：
考虑到IboDetailsGeneral 位于应用程序结构的较低层，因此IboDetailsGeneral 是IBOsNavigationElement 的子。
这就是为什么我将NavigationElementsService 添加到IBOsNavigationElement 的模块中：
NavigationModule是IBOsNavigationElement的模块
@NgModule({
imports: [
// A lot of stuff
],
declarations: [
// A lot of stuff
IBOsNavigationElement
],
exports: [
// A lot of stuff
],
providers: [
NavigationElementsService
]
})
控制台：
调用更新IBOsNavigation FUNCTION
更新IBOsNavigation "95"
再次调用 updateIBOsNavigation FUNCTION
更新IBOsNavigation“测试”
这个控制台结果告诉我：
- 正在调用该方法，因此没有提供程序错误。 与服务人员沟通正常。
我的测试：
- 我已经尝试在
IBOsNavigationElement中调用随机方法（监听器），与服务的通信很好。 -
NavigationElementsService添加到providers的唯一位置是在NavigationModule，所以只有一个服务实例对吗？然后，以下链接中解释的问题不会发生：Angular 2 observable subscription not triggering
我真的很抱歉我的“文字墙”，但此时我有点绝望。
感谢任何帮助，谢谢！
更新 1：
在第一个答案之后，我尝试了几件事......
使用ReplaySubject：
@Injectable()
export class NavigationElementsService {
public updateIBOsNavigation$ = new ReplaySubject();
updateIBOsNavigation(navigationData) {
log.d('updateIBOsNavigation', JSON.stringify(navigationData));
this.updateIBOsNavigation$.next(navigationData);
}
}
结果：调用updateIBOsNavigation()时，subscribe()仍然没有触发。
使用BehaviorSubject:
@Injectable()
export class NavigationElementsService {
updateIBOsNavigationSubject = new BehaviorSubject<any>('');
updateIBOsNavigation$ = this.updateIBOsNavigationSubject.asObservable();
updateIBOsNavigation(navigationData) {
log.d('updateIBOsNavigation', JSON.stringify(navigationData));
this.updateIBOsNavigationSubject.next(navigationData);
}
}
结果：初始化时进入subscribe()，但是当我调用updateIBOsNavigation()时，subscribe()仍然没有触发。
使用BehaviorSubject v2：
我试过这种方法：behaviourSubject in angular2 , how it works and how to use it
@Injectable()
export class NavigationElementsService {
public updateIBOsNavigation$: Subject<string> = new BehaviorSubject<string>(null);
updateIBOsNavigation(navigationData) {
log.d('updateIBOsNavigation', JSON.stringify(navigationData));
this.updateIBOsNavigation$.next(navigationData);
}
}
结果：与之前的BehaviorSubject申请相同。
更新 2：
在整个网络上进行研究后，更多的绝望尝试示例......
使用BehaviorSubject v3：
@Injectable()
export class NavigationElementsService {
updateIBOsNavigation$: Observable<any>;
updateIBOsNavigationSubject = <BehaviorSubject<any>> new BehaviorSubject([]);
constructor() {
this.updateIBOsNavigation$ = this.updateIBOsNavigationSubject.asObservable();
}
updateIBOsNavigation(navigationData) {
log.d('updateIBOsNavigation()', JSON.stringify(navigationData));
this.updateIBOsNavigationSubject.next(navigationData);
}
}
结果：与之前的BehaviorSubject 尝试相同...绝望正在上升...
更新 3：
以防万一，我想确保NavigationElementsService 是一个单例：
export class NavigationModule {
static forRoot() {
return {
ngModule: NavigationModule,
providers: [NavigationElementsService]
};
}
}
导入时：
imports: [
NavigationModule.forRoot()
]
结果：同样的问题，subscribe() 没有触发，但至少我知道有一个 NavigationElementsService 的实例。
【问题讨论】：
-
我正在为我绝望的尝试添加更新...请结束我的折磨！ xD
-
嗨，你现在解决这个问题了吗？
-
@BonesandTeeth 是的！谢谢！ :D
-
你能告诉我你做了什么让它工作吗？我也面临同样的问题......
-
@BonesandTeeth 当然，只需阅读答案和随后的所有 cmets。在我的最后一条评论中，我解释了我是如何解决我的问题的。希望你也解决！干杯！
标签： angular angular2-observables