Angular 2는 부모 구성 요소의 하위 구성 요소에서 함수를 호출합니다.

Question

저는 이것이 매우 기본적인 것 같지만 저는 Angular 2를 처음 사용했습니다.이 작업을 수행하는 가장 좋은 방법을 알고 싶습니다. 다른 방법들. 상위 컴포넌트에서 하위 컴포넌트의 함수를 호출하려고합니다. 그렇다면 내가 가진 :

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

... 그리고 child이 기능을 show() 또는 hide() 요구했다, 내가 parent에서 그 중 하나를 호출하는 방법? 템플릿의 내부

Answer 1

: 구성 요소 (옵션 2)의 내부

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

// ... 

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

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

:

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

공식 문서를 참조하십시오 구성 요소 (옵션 1)의 내부

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

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

라이브 데커 : https://plnkr.co/edit/fEYwlKlkMbPdfx9IGXGR?p=preview

Answer 2

어린이의 기능을 호출하려면 @ViewChild이 필요합니다. 그러나,/표시하는 구성 요소를 숨기기 위해, 당신은 템플릿 내에서이 문제를 해결하는 것이 더 낫다 :

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

사용자 정의 기능 hide()을 선언하는 필요 없음을.