在父组件中定义的子组件中调用函数angular 2
问题描述:
我有两个组件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
}
}
答
我不认为你可以做你所描述的到底是什么,但能实现使用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);
}
}
答
如果调用独生子女方法
个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";
}
}