Come chiamare un’altra funzione di componenti in angular2

Ho due componenti come segue e voglio chiamare una funzione da un altro componente. Entrambi i componenti sono inclusi nel terzo componente principale tramite direttiva.

Componente 1:

@component( selector:'com1' ) export class com1{ function1(){...} } 

Componente 2:

 @component( selector:'com2' ) export class com2{ function2(){... // i want to call function 1 from com1 here } } 

Ho provato a usare @input e @output ma non capisco esattamente come usarlo e come chiamare quella funzione, qualcuno può aiutarti?

Se com1 e com2 sono fratelli puoi usare

 @component({ selector:'com1', }) export class com1{ function1(){...} } 

com2 emette un evento usando EventEmitter

 @component({ selector:'com2', template: `` ) export class com2{ @Output() myEvent = new EventEmitter(); function2(){... this.myEvent.emit(null) } } 

Qui il componente padre aggiunge un binding di eventi per ascoltare eventi myEvent e quindi chiama com1.function1() quando si verifica un evento del genere. #com1 è una variabile di modello che consente di fare riferimento a questo elemento da altrove nel modello. Lo usiamo per rendere function1() il gestore di eventi per myEvent di com2 :

 @component({ selector:'parent', template: `` ) export class com2{ } 

Per altre opzioni di comunicazione tra i componenti vedi anche https://angular.io/docs/ts/latest/cookbook/component-communication.html

È ansible accedere al metodo del componente uno dal componente due ..

ComponentOne

  ngOnInit() {} public testCall(){ alert("I am here.."); } 

componentTwo

 import { oneComponent } from '../one.component'; @Component({ providers:[oneComponent ], selector: 'app-two', templateUrl: ... } constructor(private comp: oneComponent ) { } public callMe(): void { this.comp.testCall(); } 

componente due file html

  

Dipende dalla relazione tra i componenti (genitore / figlio), ma il modo migliore / generico per rendere componenti di comunicazione è quello di utilizzare un servizio condiviso.

Vedi questo documento per maggiori dettagli:

Detto questo, è ansible utilizzare quanto segue per fornire un’istanza di com1 in com2:

 
... ...

In com2, puoi usare quanto segue:

 @Component({ selector:'com2' }) export class com2{ @Input() com1ref:com1; function2(){ // i want to call function 1 from com1 here this.com1ref.function1(); } } 

Componente 1 (bambino):

 @Component( selector:'com1' ) export class Component1{ function1(){...} } 

Componente 2 (genitore):

 @Component( selector:'com2', template: `` ) export class Component2{ @ViewChild("component1") component1: Component1; function2(){ this.component1.function1(); } } 
  • Diciamo che il primo componente è DbstatsMainComponent
  • 2 ° componente DbstatsGraphComponent.
  • 1 ° componente chiamando il metodo del 2 ° componente -displayTableGraph ()

Notare la variabile locale #dbgraph sul componente figlio, che il genitore può utilizzare per accedere ai suoi metodi (dbgraph.displayTableGraph ()).