web-dev-qa-db-fra.com

Comment appeler la méthode des composants à partir du service? (angulaire2)

Je veux créer un service, qui peut interagir avec un composant. Tous les autres composants de mon application devraient pouvoir appeler ce service et ce service devrait interagir avec ce composant.

Comment appeler la méthode des composants à partir du service?

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

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

De ce servif?

@Injectable()

export class Service {


  callComponentsMethod() {
    //From this place?;
      }
}
angulartypescriptangular2-servicesangular2-componentsangular2-injection
15
Max K

L'interaction entre les composants peut en effet être réalisée à l'aide de services. Vous devrez injecter l'utilisation du service pour la communication entre composants dans tous les composants qui devront l'utiliser (tous les composants appelants et la méthode appelée) et utiliser les propriétés d'Observables.

Le service partagé peut ressembler à ceci:

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

J'ai créé un exemple de base ici , où en cliquant sur un bouton de Component1 appellera une méthode de Component2.

Si vous souhaitez en savoir plus sur le sujet, veuillez vous référer à la section de documentation dédiée: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

20
Tudor Ciotlos

La question ne demande pas d'interaction avec les composants, elle demande appel d'une méthode de composant depuis un service.

Ceci peut simplement être réalisé en injectant du service au composant. Définissez ensuite une méthode à l'intérieur du service qui prend une fonction en paramètre. La méthode doit enregistrer cette fonction en tant que propriété de service et l'appeler où elle le souhaite.

// -------------------------------------------------------------------------------------
// 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 = timebarService;
  }

  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
  }
}
1
canbax

comme ce post est un peu ancien, j'actualise la réponse de Tudor le stackblitz

le service

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

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

le composant principal

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

Un autre composant qui appelle à la méthode du service

constructor( private communicationService: CommunicationService  ) { }

  click() {
    this.communicationService.callComponentMethod("hello Word");
  }
0
Eliseo