부모 구성 요소 각도 2에 정의 된 하위 구성 요소의 호출 기능

Question

두 구성 요소 app 및 child가 있습니다. 하위 구성 요소에는 app 구성 요소에 정의 된 함수 (함수 이름은 동적으로 만드는 변수에 할당 됨)를 호출하는 버튼이 있습니다. 그러나 이것은 효과가 없습니다. 어떤 도움이 필요합니까?

는

selector: 'my-app', 
template: ` 
    <div> 
    <h2>Hello {{name}}</h2> 
    <child-comp></child-comp> 
    <p>{{data}}</p> 
    </div> 
`, 
}) 
export class App { 
    name:string; 
    data: string; 
    constructor() { 
    this.name = 'Angular2' 
    } 
    dummyFunction(){ // I want to call this function 
     data = "function called"; 
    } 
} 

Child.ts

@Component({ 
    selector: 'child-comp', 
    template: ` 
    <input type="button" value="click me" (click) = [funcName]()> // Here I am calling the function which is assign to a variable 
    `, 
}) 
export class ChildComp { 
    funcName: string; 
    constructor() { 
    funcName = 'dummyFunction'; // assigning function name to variable 
    } 
} 

Attaching Plunker

Answer 1

난 당신이 설명 정확히 할 수 있다고 생각하지 않습니다를 app.ts 만 달성 할 수 Output 데코레이터와를 사용하는 동일한 것 부모 - 자식 구성 요소 통신을 위해 documentation에 기술 된 바와 같은.

아이 컴포넌트가 필요한 콜백 해당 이벤트 (예 : dummyFunction())

응용 프로그램 구성 요소에 바인딩 할 수있는 이벤트, 아래 buttonClicked, 부모 구성 요소 (예 : 응용 프로그램)을 방출 할 수

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <child-comp (buttonClicked)="dummyFunction()"></child-comp> 
     <p>{{data}}</p> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    data: string; 
    constructor() { 
    this.name = 'Angular2' 
    } 

    dummyFunction(){ // I want to call this function 
    this.data = "function called"; 
    } 
} 

그리고 하위 구성 요소

import {Component, Output, EventEmitter} from '@angular/core' 

@Component({ 
    selector: 'child-comp', 
    template: ` 
    <input type="button" value="click me" (click) = "onClick($event)"> // Here I am calling the function which is assign to a variable 
    `, 
}) 
export class ChildComp { 

    @Output() buttonClicked = new EventEmitter(); 
    constructor() { 
    } 

    onClick($event){ 
    this.buttonClicked.emit($event); 
    } 
} 

Answer 2

전화 외아들 방법

경우 6,

Child.ts 당신이 부모와 자식에서 의사 소통을해야하는 경우

@Component({ 
    selector: 'child-comp', 
    template: ` 
    <input type="button" value="click me" (click)="this[funcName]()"> // Here I am calling the function which is assign to a variable 
    `, 
}) 
export class ChildComp { 
    funcName: string; 
    constructor() { 
    this.funcName = 'dummyFunction'; // assigning function name to variable 
    } 
    dummyFunction() { 
    console.log('do something') 
    } 
} 

또는

@Component({ 
    selector: 'child-comp', 
    template: ` 
    <input type="button" value="click me" (click)="funcName()"> // callhere 
    `, 
}) 
export class ChildComp { 
    funcName: Fn; 
    constructor() { 
    this.funcName = this.dummyFunction.bind(this); // assigning function to variable 
    } 
    dummyFunction() { 
    console.log('do something') 
    } 
} 

:

@Component({ 
    selector: 'child-comp', 
    template: ` 
    <input type="button" value="click me" (click)="funcName()"> // callhere 
    `, 
}) 
export class ChildComp { 
    @Input() 
    funcName: Fn; 
    constructor() { 
    } 
} 

@Component({ 
selector: 'my-app', 
template: ` 
    <div> 
    <h2>Hello {{name}}</h2> 
    <child-comp [funcName]="dummyFunction"></child-comp> 
    <p>{{data}}</p> 
    </div> 
`, 
}) 
export class App { 
    name:string; 
    data: string; 
    constructor() { 
    this.name = 'Angular2'; 
    this.dummyFunction = this.dummyFunction.bind(this); 
    } 
    dummyFunction(){ // I want to call this function 
     data = "function called"; 
    } 
} 

또는 사용하여 출력

import {Component, Output, EventEmitter } from '@angular/core' 

@Component({ 
    selector: 'child-comp', 
    template: ` 
    <input type="button" value="click me" (click)="onClick($event)"> 
    `, 
}) 
export class ChildComp { 

    @Output() eventName = new EventEmitter(); 
    constructor() { 

    } 
    onClick(e) { 
    // do something here 
    this.eventName.emit(e); 
    } 
} 

상위 :

@Component({ 
selector: 'my-app', 
template: ` 
    <div> 
    <h2>Hello {{name}}</h2> 
    <child-comp (eventName)="dummyFunction()"></child-comp> 
    <p>{{data}}</p> 
    </div> 
`, 
}) 
export class App { 
    name:string; 
    data: string; 
    constructor() { 
    this.name = 'Angular2'; 
    } 
    dummyFunction(){ // I want to call this function 
     data = "function called"; 
    } 
}