Myujth

I have 2 component that need to communicate, and a service in the middle.

Service

import Injectable from '@angular/core';
import Subject from 'rxjs/Subject';

@Injectable()
export class CommunicationService 

 // Observable string sources
 private onOpen = new Subject<any>();

 // Observable string streams
 onOpen = this.onOpen.asObservable();

 // Service message commands
 callComponentMethod() 
 this.onOpen.next();
 

Component A

 import Component from '@angular/core';
import CommunicationService from './communication.service.ts'

@Component(
 selector: 'app-comp1',
 template: `
 <button type="button" (click)="callMethod()">Call method from Component1</button>
 `
)
export class Component1 

 constructor( private communicationService: CommunicationService ) 

 callMethod = function () 
 this.communicationService.onOpen();
 

Component B

import Component from '@angular/core';
import CommunicationService from './communication.service.ts'

@Component(
 selector: 'app-comp2',
 template: ``
)
export class Component2 

 constructor( private communicationService: CommunicationService ) 

 this.communicationService.onOpen.subscribe(
 () => 
 alert('(Component2) onOpen');
 
 );

 

following this plunker : http://plnkr.co/edit/SmntWy0GTNdvGB5Jb3hO?p=preview the method are called but, I would like to pass a parameter. how do I do this ?

You have quite a few things incorrect with your implementation. Here is a working example of what you want to achieve:

Example

You don't need to use Subject, you can just use a normal observable and then "push" new values to the emitter for that observable:

export class CommunicationService {
 // Observable string sources
 private emitter: any;
 public messageInbox: Observable<any>

 constructor()
 this.messageInbox = Observable.create(e => this.emitter = e);
 

 // Service message commands
 public SendMessage() 
 this.emitter.next("hello");
 

The code in your components was mostly ok.

Call callComponentMethod function of CommunicationService class rather than calling onOpen. Second, if you want to pass the information you can do it through passing the value to callComponentMethod function.

Below is the modified code

CommunicationService

import Injectable from '@angular/core';
import Subject from 'rxjs/Subject';

@Injectable()
export class CommunicationService 

 // Observable string sources
 private onOpen = new Subject<any>();

 // Observable string streams
 onOpen = this.onOpen.asObservable();

 // Service message commands
 callComponentMethod(info:any) 
 this.onOpen.next(info); //<-- pass the value to subscribers
 

Component1

import Component from '@angular/core';
import CommunicationService from './communication.service.ts'

@Component(
 selector: 'app-comp1',
 template: `
 <button type="button" (click)="callMethod()">Call method from Component1</button>
 `
)
export class Component1 

 constructor( private communicationService: CommunicationService ) 

 callMethod = function () 
 let obj = name : "john" ; //<-- you can pass the value from callMethod
 this.communicationService.callComponentMethod(obj); //<-- changed here