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() .