example - input output angular 6

Angular 2-Cómo activar un método en un niño del padre

Question

Es posible enviar datos desde el padre a un niño a través de @Input, o llamar a un método en el padre del niño con @Output, pero me gustaría hacer exactamente lo contrario, lo que está llamando a un método en el niño del padre. Básicamente algo así:

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

y el niño:

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

  constructor() {}
}

El fondo es una especie de solicitud de "obtención", es decir, para obtener un estado actualizado del niño.

Ahora sé que podría lograrlo con un servicio y sujeto / observable, pero me preguntaba si no hay algo más sencillo.

Answer 1

Creo que esto podría ser lo que estás buscando:

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

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

Puede acceder a propiedades y métodos secundarios utilizando variables locales dentro de la plantilla o utilizando el decorador @ViewChild en la clase de componente principal.

Answer 2

@ViewChild es la solución correcta, pero la documentación vinculada anteriormente no estaba nada clara para mí, por lo que paso una explicación más amigable que me ayudó a entenderla.

Tengamos un ChildComponent con un método:

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

Y el componente principal, donde podemos llamar al método anterior utilizando la técnica ''@ 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!
  }
}