通过Angular 2中的Observable和Subject使用服务在多个组件之间进行通信

时间:2017-05-30 18:10:22

标签: angular observable angular2-services angular2-observables behaviorsubject

我是rxjs的新手,所以我想问一个关于Angular 2ObservablesBehaviorSubject/Subject的问题。

所以,我想要实现的是:onclick button ComponentAComponentB通知其他组件,例如ComponentCservice。< / p>

到目前为止我所做的是创建一个private isMenuOpenBS = new BehaviorSubject(false); toggleMenu(): void { this.isMenuOpenBS.next(!this.isMenuOpenBS.getValue()); } getMenuState(): Observable<boolean> { return this.isMenuOpenBS.asObservable(); }

provide menuService

然后让一个组件this.menuService.toggleMenu()调用BehaviorSubject来更改toggleMenu(): void { this.menuService.toggleMenu(); this.menuService.isMenuOpenBS.subscribe( (data) => { console.log(data) }, (e) => {console.log(e)}, () => {console.log('completed')} ) } 的值。代码:

OnInit()

另一个subscribes getMenuState()Observable的{​​{1}}组件OnInit(),但它只在ngOnInit(): void { this.menuService.getMenuState().subscribe( (data)=>{ this.messages = data; console.log('nav component'); }, (e) => {console.log(e)}, () => {console.log('completed')} ) } 上得到了值。代码:

complete

永远不会调用const appRoutes: Routes = [ { path: '', component: LoginComponent }, { path: 'dashboard', component: DashboardComponent }, { path: 'application', component: ApplicationComponent }, { path: 'decision', component: DecisionComponent }, ]; export const routing = RouterModule.forRoot(appRoutes); 函数。

任何想法我做错了什么,或者我错过了逻辑中的某些内容?

-

编辑:所以,为了解释一下,问题是我可以看到observable的第一个值,但没有别的。之后没有错误没有完成或没有&#34; next&#34;自从我从主题发送新值以来错误的价值。最后问题在于组件的提供者列表,而不是可观察或主题的问题,但在解决问题之前,不容易看出问题存在。

3 个答案:

答案 0 :(得分:0)

您可以通过子父关系或通过服务在组件之间进行通信。

https://angular.io/docs/ts/latest/cookbook/component-communication.html

但是有一种方法可以通过ngrx / store。这个概念类似于Redux。你可以尝试一下。

答案 1 :(得分:0)

我粘贴的代码有错误。 我的问题是我创建的2 components注入了“菜单服务”。在他们的providers数组中,所以我没有单身。

我从两个组件中删除了providers数组中的服务,但它确实有效!

PS:这个http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject是一个有用的教程,用于实现我对providers数组的问题。

答案 2 :(得分:0)

一些事情......

  1. 您不需要将BehaviorSubject作为可观察对象返回,您应该能够订阅observables没有问题。
  2. 每次调用toggle函数时,都不应继续订阅服务。你这样做会创造很多订阅。如果您从上面接受我的建议,您只需记录getValue()函数的返回值。
  3. 很高兴你解决了它!