Vfrdtyky

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

  }



}