How to call component method from service? (angular2)

问题

I want to create service, which can interact with one component. All another components in my app, 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 servive?

@Injectable()

export class Service {


  callComponentsMethod() {
    //From this place?;
      }
}

回答1:

Interaction between components can be indeed achieved using services. You will need to inject the service use for inter-component communication into all the components which will need to use it (all the caller components and the callee method) and make use of the properties of Observables.

The shared service can 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 have 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 the subject, please refer to the dedicated documentation section: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

回答2:

The question does not ask component interaction, it asks for calling a component method from a service.

This simply can be achieved by injecting service to the component. Then define a method inside the service which takes a function as parameter. The method should save this function as a property of service and call it wherever 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
  }
}

回答3:

as this post is a bit old, I actualize the response of Tudor the stackblitz

the service

private customSubject = new Subject<any>();
  customObservable = this.customSubject.asObservable();

  // Service message commands
  callComponentMethod(value:any) {
    this.customSubject.next(value);
  }

the main-component

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

Another component that call to the method of the service

constructor( private communicationService: CommunicationService  ) { }

  click() {
    this.communicationService.callComponentMethod("hello word");
  }

来源：https://stackoverflow.com/questions/40788458/how-to-call-component-method-from-service-angular2