4 각 - 상위 구성 요소의 HTML

Question

에서 호출 아이 컴포넌트 기능은 나는 부모 요소의 HTML의 하위 구성 요소 함수를 호출 할 필요가있다. 이 같은

뭔가 :

하위 구성 요소 :

export class childComponent { 
    private value: boolean; 

    @input() 
    setValue(inputVal){ 
    this.value = inputVal; 
    } 
} 

부모 요소 :

<childComponent [setValue] = "true"></childComponent> 

어떤 아이디어 그것은 어떻게 할 수 있는가?

Answer 1

당신은보기 아이

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; 

    @Component({ 
     selector: 'child-cmp', 
     template: '<p>child</p>' 
    }) 
    class ChildCmp { 
     doSomething() {} 
    } 
    @Component({ 
     selector: 'some-cmp', 
     template: '<child-cmp></child-cmp>', 
     directives: [ChildCmp] 
    }) 
    class SomeCmp { 
     @ViewChild(ChildCmp) child:ChildCmp; 
     ngAfterViewInit() { 
     // child is set 
     this.child.doSomething(); 
     } 
    } 

하여이 작업을 수행 할 수 있습니다 또는 당신은 또한 문자열

로 할 수있는

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; 
@Component({ 
    selector: 'child-cmp', 
    template: '<p>child</p>' 
}) 
class ChildCmp { 
    doSomething() {} 
} 
@Component({ 
    selector: 'some-cmp', 
    template: '<child-cmp #child></child-cmp>', 
    directives: [ChildCmp] 
}) 
class SomeCmp { 
    @ViewChild('child') child:ChildCmp; 
    ngAfterViewInit() { 
    // child is set 
    this.child.doSomething(); 
    } 
} 

Answer 2

당신은 @input 사용하는 방법을 바인딩 할 수 없습니다. 당신은 부모 구성 요소에서 다음

@Component({ 
    selector: 'child-cmp', 
    template: '<p>child</p>' 
}) 
class childComponent { 
    value : anyl 
    setValue(inputVal){ 
    this.value = inputVal; 
    } 
} 

및 @ViewChild

를 사용하여이 작업을 수행 할 수있는 것은

class SomeCmp { 
    @ViewChild(ChildCmp) child:ChildCmp; 
    ngAfterViewInit() { 
    this.child.setValue(yourval); 
    } 
}