2017-02-09 64 views
0

我有两个组件app和child。在子组件中我有点击按钮,我正在调用一个函数(函数名称分配给一个变量,使其动态),这是在应用程序组件中定义的。但是这不起作用。任何帮助?在父组件中定义的子组件中调用函数angular 2

app.ts

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

回答

2

我不认为你可以做你所描述的到底是什么,但能实现使用Output修饰器和相同的东西如在documentation中描述的用于父 - 子组件通信的。

你的孩子组件可以发出一个事件,下面buttonClicked和父组件(即应用程序)可以绑定到与所需的回调事件(即dummyFunction()

应用组件

@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); 
    } 
} 
1

如果调用独生子女方法

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"; 
    } 
} 
相关问题