comunicacion - pasar parametros entre componentes angular 2

Angular 2+ llama a una función en un componente secundario desde su componente principal

Question

Me gustaría saber la mejor manera de hacerlo, y si hay diferentes maneras. Estoy intentando llamar a una función en un componente secundario desde su componente principal. Así que si tengo:

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

... y el child tiene funciones llamadas show() u hide() , ¿cómo puedo llamar a cualquiera de los parent ?

Answer 1

Dentro de su plantilla:

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

Dentro de su componente (opción 1):

import { ..., ViewChild, ... } from ''@angular/core'';
// ...
export class ParentComponent {
@ViewChild(''yourChild'') child;
ngAfterViewInit() {
console.log(''only after THIS EVENT "child" is usable!!'');
this.child.hide();
}
}

Dentro de su componente (opción 2):

import { ..., ViewChild, ... } from ''@angular/core'';
import { ..., ChildComponent, ... } from ''....'';
// ...
export class ParentComponent {
@ViewChild(ChildComponent) child;
ngAfterViewInit() {
console.log(''only after THIS EVENT "child" is usable!!'');
this.child.hide();
}
}

Consulte los documentos oficiales: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

demoledor de demostración en vivo: https://plnkr.co/edit/fEYwlKlkMbPdfx9IGXGR?p=preview

Answer 2

Para llamar a una función de un niño, necesitará @ViewChild . Sin embargo, para mostrar / ocultar un componente, es mejor resolver esto dentro de la plantilla:

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

No es necesario declarar una función personalizada hide() .