Angular 2 - Comment déclencher une méthode sur un enfant à partir du parent

Question

Il est possible d'envoyer des données du parent à l'enfant via @Input, ou d'appeler une méthode sur le parent à partir de l'enfant avec @Output, mais j'aimerais faire exactement l'inverse, c'est-à-dire appeler une méthode sur l'enfant à partir du parent. En gros, quelque chose comme ça :

@Component({
  selector: 'parent',
  directives: [Child],
  template: `
<child
  [fn]="parentFn"
></child>
`
})
class Parent {
  constructor() {
    this.parentFn()
  }
  parentFn() {
    console.log('Parent triggering')
  }
}

et l'enfant :

@Component({
  selector: 'child',
  template: `...`
})
class Child {
  @Input()
  fn() {
    console.log('triggered from the parent')
  }

  constructor() {}
}

L'arrière-plan est une sorte de requête "get", c'est-à-dire pour obtenir un statut actualisé de l'enfant.

Je sais que je pourrais y parvenir avec un service et un Subject/Observable, mais je me demandais s'il n'y avait pas quelque chose de plus simple ?

Answer 1

Je pense que ça pourrait être ce que vous cherchez :

https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable

https://angular.io/guide/component-interaction#parent-calls-an-viewchild

Vous pouvez accéder aux propriétés et aux méthodes des enfants en utilisant des variables locales dans le modèle ou en utilisant l'attribut @ViewChild dans la classe du composant parent.

Answer 2

@ViewChild est la bonne solution, mais la documentation liée ci-dessus était un peu floue pour moi, donc je passe une explication un peu plus amicale qui m'a aidé à la comprendre.

Prenons un ChildComponent avec une méthode :

whoAmI() {
  return 'I am a child!!';
}

Et le composant parent, où nous pouvons appeler la méthode ci-dessus en utilisant la technique "@ViewChild" :

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

import { ChildComponent } from './child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  @ViewChild(ChildComponent) child: ChildComponent;

  ngOnInit() {
    console.log(this.child.whoAmI()); // I am a child!
  }
}