Comment appeler la fonction d'un autre composant en Angular2

Question

Je possède deux composants comme suit et je veux appeler une fonction depuis un autre composant. Les deux composants sont inclus dans le troisième composant parent en utilisant une directive.

Composant 1 :

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

Composant 2 :

@component(
    selector:'com2'
)
export class com2{
    function2(){...
        // je veux appeler la fonction 1 de com1 ici
    }
}

J'ai essayé d'utiliser @input et @output mais je ne comprends pas exactement comment les utiliser et comment appeler cette fonction, quelqu'un peut-il m'aider ?

Answer 1

Si com1 et com2 sont des frères et sœurs, vous pouvez utiliser

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

com2 émet un événement en utilisant un EventEmitter

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

Ici, le composant parent ajoute une liaison d'événement pour écouter les événements myEvent et appelle ensuite com1.function1() lorsque cet événement se produit. #com1 est une variable de modèle qui permet de faire référence à cet élément depuis un autre endroit dans le modèle. Nous utilisons cela pour faire de function1() le gestionnaire d'événements pour myEvent de com2:

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

Pour d'autres options de communication entre les composants, voir aussi component-interaction

Answer 2

Vous pouvez accéder à la méthode du composant un à partir du composant deux..

componentOne

  ngOnInit() {}

  public testCall(){
    alert("Je suis ici..");    
  }

componentTwo

import { oneComponent } from '../one.component';

@Component({
  providers:[oneComponent ],
  selector: 'app-two',
  templateUrl: ...
}

constructor(private comp: oneComponent ) { }

public callMe(): void {
    this.comp.testCall();
  }

Fichier html du composant deux

cliquer

Answer 3

Composant 1 (enfant):

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

Composant 2 (parent):

@Component(
  selector:'com2',
  template: ``
)
export class Component2{
  @ViewChild("component1") component1: Component1;

  function2(){
    this.component1.function1();
  }
}

Answer 4

Il dépend de la relation entre vos composants (parent / enfant) mais la meilleure / générique façon de faire communiquer les composants est d'utiliser un service partagé.

Voir ce document pour plus de détails :

• https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Cela étant dit, vous pourriez utiliser ce qui suit pour fournir une instance du com1 dans com2 :

  ...
  ...

Dans com2, vous pouvez utiliser le suivant :

@Component({
  selector:'com2'
})
export class com2{
  @Input()
  com1ref:com1;

  function2(){
    // je veux appeler la fonction 1 de com1 ici
    this.com1ref.function1();
  }
}

Answer 5

• Le premier composant est DbstatsMainComponent
• Le deuxième composant DbstatsGraphComponent.
• Le premier composant appelle la méthode du deuxième

Graph

Remarquez la variable locale #dbgraph sur le composant enfant, que le parent peut utiliser pour accéder à ses méthodes (dbgraph.displayTableGraph()).