Angular 2+从其父组件调用子组件中的函数

Question

我想知道最好的方法,如果有不同的方法.我正在尝试从其父组件中调用子组件中的函数.所以,如果我有:

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

...并且child具有调用的函数show()或者hide(),如何调用其中任何一个parent？

Answer 1

在您的模板内:

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

在组件内部(option1):

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

// ...

export class ParentComponent {
   @ViewChild('yourChild') child;

   ngAfterViewInit() {
      console.log('only after THIS EVENT "child" is usable!!');
      this.child.hide();
   }
}

在您的组件内部(option2):

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();
   }
}

请参阅官方文档:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!# parent-to-view- child

现场演示plunker:https://plnkr.co/edit/fEYwlKlkMbPdfx9IGXGR ? p = preview