Angular 2+ appelle une fonction dans un composant enfant depuis son composant parent

Question

J'aimerais savoir quelle est la meilleure façon de procéder et s'il existe différentes méthodes. J'essaie d'appeler une fonction dans un composant enfant à partir de son composant parent. Donc si j'ai :

<parent>
    <child></child>
</parent>

...et child a des fonctions appelées show() o hide() Comment puis-je appeler l'un ou l'autre à partir de parent ?

Answer 1

À l'intérieur de votre modèle, en utilisant des variables/références de modèle :

<parent (click)="yourChild.hide()">
    <child #yourChild></child>
</parent>

live-demo : https://stackblitz.com/edit/angular-so-3?file=src%2Fapp%2Fapp.component.html

OU

A l'intérieur de votre composant :

import { ..., ViewChild, ... } from '@angular/core';

// ...

export class ParentComponent {
   @ViewChild('yourChild' /* #name or Type*/, {static: false}) child;

   ngAfterViewInit() {
      console.log('only after THIS EVENT "child" is usable!!');
      this.child.hide();
   }
}

A l'intérieur de votre composant (option 2) :

import { ..., ViewChild, ... } from '@angular/core';
import { ..., ChildComponent, ... } from '....';

// ...

export class ParentComponent {
   @ViewChild(ChildComponent /* #name or Type*/, {static: false}) child;

   ngAfterViewInit() {
      console.log('only after THIS EVENT "child" is usable!!');
      this.child.hide();
   }
}

Voir les documents officiels : https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

Answer 2

Pour appeler une fonction d'un enfant, vous aurez besoin de @ViewChild . Cependant, pour afficher/masquer un composant, il est préférable de résoudre ce problème dans le modèle :

<parent>
    <button (click)="showChild=!showChild">Toggle child</button>
    <child *ngIf="showChild"></child>
</parent>

Pas besoin de déclarer une fonction personnalisée hide() .

Answer 3

Les autres réponses sont correctes, mais je pense que parfois cette fonction est censée être appelée avec le flux de données de la manière angulaire du parent à l'enfant, donc ce dont vous avez besoin est d'exécuter une fonction chaque fois qu'une variable a changé dans le composant parent. voir ci-dessous :

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  variable = "yes!";
  toggle() {
    this.variable = this.variable === "yes!" ? "hell no!" : "yes!";
  }
}

app tempalte :

<button (click)="toggle()">Toggle</button>

Parent says: {{variable}}    

<p>
 <app-child [childVar]="variable"></app-child>
</p>

composant de l'enfant :

export class ChildComponent implements OnInit {
  _childVar: string; // if you need to record the value and access later in child component
  counter = 0;

  @Input()
  set childVar(value: string) {
    this._childVar = value;
    this.childFunction(); // the answer is here
  }

  childFunction() {
    this.counter++;
    console.log("called child function");
  }

}

tester ici https://stackblitz.com/edit/angular-1rywfc