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!
}
}