191 votes

Comment appeler la fonction d'un autre composant dans angular2

J'ai 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 à l'aide de la directive.

Composante 1 :

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

Composante 2 :

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

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

0 votes

150voto

Günter Zöchbauer Points 21340

Si com1 et com2 sont 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: `<button (click)="function2()">click</button>`
)
export class com2{
  @Output() myEvent = new EventEmitter();
  function2(){...
    this.myEvent.emit(null)
  }
}

Ici, le composant parent ajoute une liaison d'événement à écouter à myEvent et appelle ensuite com1.function1() quand un tel é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 du modèle. Nous l'utilisons pour faire function1() le gestionnaire d'événements pour myEvent de com2 :

@component({
  selector:'parent',
  template: `<com1 #com1></com1><com2 (myEvent)="com1.function1()"></com2>`
)
export class com2{
}

Pour d'autres options de communication entre les composants, voir également interaction entre les composants

0 votes

Votre question ne contient rien sur la relation parent-enfant. Qu'essayez-vous d'accomplir ?

0 votes

Lorsque vous avez commencé à dire "Ici, le composant parent ajoute une liaison d'événement pour écouter monÉvénement", je suis très confus. Je pensais que nous essayions de résoudre la situation des composants frères et soeurs. Le lien angulaire est tout parent enfant, donc je ne peux pas les utiliser.

0 votes

C'est le parent des frères et sœurs rhésus (on peut aussi dire hôte). <sibling1 (myEvent)="..."> est une liaison d'événement pour le parent/hôte, parce que c'est la seule façon qu'Angular fournit. Le gestionnaire d'événement appelle cependant une méthode sur l'autre frère ( com1 ). Le parent est utilisé comme médiateur.

101voto

Jayantha Points 463

Vous pouvez accéder à la méthode du composant 1 depuis le composant 2

componentOne

  ngOnInit() {}

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

composantDeux

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 2

<button (click)="callMe()">click</button>

2 votes

C'était tout pour moi jusqu'à ce que j'ai eu besoin par exemple d'accéder à une variable dans componentOne à partir de componentTwo en invoquant testCall.... le cas pour lequel la valeur de la variable est définie par componentOne mais componentTwo obtiendra la valeur par défaut et non la valeur actuelle.

2 votes

Je n'obtiens pas les valeurs de la variable componentOne dans la méthode testCall si j'appelle testCall depuis componentTwo. Une idée ?

0 votes

Veuillez expliquer cette méthode pour Ionic 4 avec Angular 7.

39voto

Ihor Khomiak Points 493

Composante 1(enfant) :

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

Composant 2 (parent) :

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

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

0 votes

Bonne réponse, voir aussi ici .

1 votes

Comment appeler la fonction 2 sur le html ? J'ai toujours ce résultat : component1 is undefined.

0 votes

<com1 #composant1 (click)="function2()"></com1>

27voto

thierry templier Points 998

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

Voir ce document pour plus de détails :

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

<div>
  <com1 #com1>...</com1>
  <com2 [com1ref]="com1">...</com2>
</div>

Dans com2, vous pouvez utiliser les éléments suivants :

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

  function2(){
    // i want to call function 1 from com1 here
    this.com1ref.function1();
  }
}

0 votes

Je reçois l'erreur Can't bind to 'com1Ref' since it isn't a known native property.

0 votes

Et il ne prend pas this.com1.function1() ; mais this.com1ref.function1() ;

0 votes

Merci de m'avoir signalé la faute de frappe ! Avez-vous le @Input sur le terrain ?

1voto

RAHUL KUMAR Points 321
  • Disons que le premier composant est DbstatsMainComponent.
  • 2ème composant DbstatsGraphComponent.
  • Le 1er composant appelle la méthode du 2ème

<button (click)="dbgraph.displayTableGraph()">Graph</button> <dbstats-graph #dbgraph></dbstats-graph>

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X