Observable in a callback function - angular 2

Question

I am trying to implement a callback function in a service class, which has to return data back to the component class.

ChatComponent.ts

export class ChatComponent implements OnInit {

  constructor( public _chatService : ChatService) {
    _chatService.joinChat()
  }

  OnInit(){

  }

 // I need to get the `msg` object from the ChatService class
  didReceiveMessage(msg){
console.log(“Message received from chat service class”+msg);
  } 

}

ChatService.ts

import { Component, Input } from '@angular/core';
import { Injectable }     from '@angular/core';


@Injectable()
export class ChatService {
   public chatObj : SomeChatObject;

    constructor() { }

    joinChat(){
    //Join chat related functionality
    this.chatObj.addHandler(this.onMessageReceivedHandler, null, "message");
    }

     onMessageReceivedHandler = (message) => {
    //Send `message` back to `didReceiveMessage ` method in ChatComponent.ts
     return true;
     }
}

I’ve seen an example of using Http Observable callback. Here I’ve added my callback explicitly using addHandler. I will get the message object in the ‘onMessageReceivedHandler’ method. But i need to pass it to ChatComponent. How can I pass the data.

make a return statement in the callback method. – Jai Oct 03 '17 at 07:06 — Jai, Oct 03 '17 at 07:06

score 2 · Answer 1 · answered Oct 03 '17 at 08:11

I think Carsten is right you can use subject and Behavior Subject to get your received massage

In service file

message:Subject<string> = new Subject();

    broadcastMessage(text:string) {
        this.message.next(text);
    }

and In component file you can subscribe to the message subject

this. _chatService.message.subscribe((msg) => {
  console.log(“Message received from chat service class”+msg);
});

score 1 · Accepted Answer · answered Oct 03 '17 at 07:09

1

You can use a Subject for this.

In ChatService:

subscribers: Subject[] = [];

then in joinChat

joinChat(userSubject: Subject) {
  this.subscribers.push(userSubject);
}

then in messageReceivedHandler:

for (let i = 0; i < this.subscribers.length(); i++) {
  this.subscribers[i].next("Hello");
}

ChatComponent:

constructor( public _chatService : ChatService) {
  let subject = new Subject();
  subject.subscribe(
    msg => console.log(msg);
  );

  _chatService.joinChat(subject);
}

Take note: i wrote this from my head so no guarantees that the code compiles..

answered Oct 03 '17 at 07:09

Carsten

4,005
21
28

Thanks for the answer. Will try it out and update you. – Anish Oct 03 '17 at 09:06
I am able to get the message. I was looking into Subject in RxJs. Hence the delay in response. Thank you. – Anish Oct 03 '17 at 09:38

Observable in a callback function - angular 2

2 Answers2