I'm trying to establish communication between sibling components on the same page using a service, but it seems the listening component is not triggering when the subscribed object changes:
Service
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {ReportTable} from '../classes/report.table.class';
import {Subject} from 'rxjs/Subject';
@Injectable()
export class ReportService {
private payload = new Subject<string>();
// Observable string streams
payload$ = this.payload.asObservable();
constructor() { }
public communicate(payload: string) {
console.log('called2');
this.payload.next(payload);
}
}
Broadcasting Component
import {Component, Input} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import {FilterComponent} from '../reports/filter.component';
import {ReportService} from '../../services/report.service';
@Component({
selector: 'filteroptions',
templateUrl: '/Reports/filteroptions.template.html',
providers: [ReportService]
})
export class FilterOptionsComponent {
displayId: string;
constructor(private reportService: ReportService) {
}
passDisplayId(displayId: string) {
console.log('called1');
this.reportService.communicate(displayId);
}
}
Listening Component
import {Component, OnInit, OnDestroy} from 'angular2/core';
import {ReportService} from '../../services/riskreport.service';
import {ReportTable} from '../../classes/riskreport.table.class';
import {HTTP_PROVIDERS} from 'angular2/http';
import {DataTable} from 'primeng/primeng';
import {Column} from 'primeng/primeng';
import {Subscription} from 'rxjs/Subscription';
@Component({
selector: 'report-table',
templateUrl: '/Reports/riskreport.table.template.html',
providers: [ReportService, HTTP_PROVIDERS],
directives: [DataTable, Column]
})
export class ReportTableComponent implements OnInit, OnDestroy {
public subscription: Subscription;
constructor(private reportService: ReportService) {
this.subscription = this.reportService.payload$.subscribe(m => console.log('called3'));
}
ngOnInit() {}
// Prevent memory leak
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
In my console, I can see that called1 and called2 are logged, but called3 is not. What could be causing the second component not to listen/subscribe?