Как вызвать метод компонента из службы? (angular2)

Я хочу создать сервис, который может взаимодействовать с одним компонентом. Все остальные компоненты моего приложения должны иметь возможность вызвать эту службу, и эта служба должна взаимодействовать с этим компонентом.

Как вызвать метод компонента из службы?

@Component({
  selector:'component'
})
export class Component{

  function2(){ 
    // How call it?
  }
}

Из этого служения?

@Injectable()

export class Service {


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

Ответы

Ответ 1

Взаимодействие между компонентами действительно может быть достигнуто с использованием служб. Вам нужно будет внедрить сервисное обслуживание для межкомпонентной связи во все компоненты, которые должны будут использовать его (все компоненты вызывающего абонента и метод вызываемого абонента) и использовать свойства Observables.

Общая служба может выглядеть примерно так:

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();
  }
}

Я создал базовый пример здесь, где щелчок по кнопке из Component1 вызовет метод из Component2.

Если вы хотите прочитать больше по этому вопросу, обратитесь к разделу специальной документации: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Ответ 2

Вопрос не задает взаимодействие с компонентом, он просит вызвать метод компонента из службы.

Этого просто можно достичь, внедрив услугу в компонент. Затем определите метод внутри службы, который принимает функцию в качестве параметра. Метод должен сохранить эту функцию как свойство службы и вызывать ее там, где он хочет.

// -------------------------------------------------------------------------------------
// 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

поскольку этот пост немного устарел, я актуализирую ответ тудора стекаблиц

сервис

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

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

основной компонент

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

Еще один компонент, который вызывает метод службы

constructor( private communicationService: CommunicationService  ) { }

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