How to call component method from service? (angular2)

Question

I want to create a service that can interact with one component. All other components of my application should be able to call this service, and this service should interact with this component.

How to call component method from service?

@Component({ selector:'component' }) export class Component{ function2(){ // How call it? } } 

From this ministry?

 @Injectable() export class Service { callComponentsMethod() { //From this place?; } } 

Answer 1

Interoperability between components can indeed be achieved using services. You will need to implement a service for inter-component communication in all components that will need to use it (all components of the caller and the method of the called subscriber) and use the properties of Observables.

A shared service might look something like this:

 import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class CommunicationService { // Observable string sources private componentMethodCallSource = new Subject<any>(); // Observable string streams componentMethodCalled$ = this.componentMethodCallSource.asObservable(); // Service message commands callComponentMethod() { this.componentMethodCallSource.next(); } } 

I created a basic example here where clicking on a button from Component1 will call a method from Component2.

If you want to read more on this subject, refer to the special documentation section: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 2

The question does not ask the interaction with the component , it asks to call the component method from the service .

This can simply be achieved by implementing the service in the component. Then define a method inside the service that takes the function as a parameter. The method should save this function as a property of the service and call it where it wants.

 // ------------------------------------------------------------------------------------- // codes for component import { JustAService} from '../justAService.service'; @Component({ selector: 'app-cute-little', templateUrl: './cute-little.component.html', styleUrls: ['./cute-little.component.css'] }) export class CuteLittleComponent implements OnInit { s: JustAService; a: number = 10; constructor(theService: JustAService) { this.s = theService; } ngOnInit() { this.s.onSomethingHappended(this.doThis.bind(this)); } doThis() { this.a++; console.log('yuppiiiii, ', this.a); } } // ------------------------------------------------------------------------------------- // codes for service @Injectable({ providedIn: 'root' }) export class JustAService { private myFunc: () => void; onSomethingHappended(fn: () => void) { this.myFunc = fn; // from now on, call myFunc wherever you want inside this service } } 

Answer 3

since this post is a little outdated, I will update the answer of tudor stackable

service

 private customSubject = new Subject<any>(); customObservable = this.customSubject.asObservable(); // Service message commands callComponentMethod(value:any) { this.customSubject.next(value); } 

main component

 constructor(private communicationService:CommunicationService){} ngOnInit() { this.communicationService.customObservable.subscribe((res) => { this.myFunction(res) } ); } myFunction(res:any) { alert(res) } 

Another component that calls a service method

 constructor( private communicationService: CommunicationService ) { } click() { this.communicationService.callComponentMethod("hello word"); }