我试图将回调函数绑定到一个指令,当事件被触发时,父组件的属性是未定义的
app.ts
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {MyComponent} from './my-component';
@Component({
selector: 'my-app',template: `
<button (click)="appOnClick('CLICK FROM APP')">BUTTOM OUTSIDE COMPONENT</button>
<br><br>
<my-component [onClick]="appOnClick"></my-component>`,directives: [MyComponent]
})
export class MyApp {
public theBoundCallback: Function;
test:string = "THIS SHOULD HAVE A VALUE";
public ngOnInit(){
this.theBoundCallback = this.appOnClick.bind(this);
}
appOnClick(someText){
console.log(someText);
console.log(this.test);
}
}
bootstrap(MyApp);
我-component.ts
import {Component,Input} from 'angular2/core';
@Component({
selector: 'my-component',template: `<button (click)="onClick('CLICK FROM COMPONENT')">BUTTOM INSIDE COMPONENT</button>`
})
export class MyComponent{
@Input() onClick: Function;
}
这将呈现两个按钮：
BUTTOM OUTSIDE COMPONENT,直接从应用程序调用appOnClick函数,当点击控制台显示：
– 点击APP
– 这应该有价值
BUTTOM INSIDE COMPONENT,它通过组件中的@Input函数调用appOnClick函数,单击时控制台显示：
– 点击APP
– 未定义
我在Plunker上创建了这个例子
解决方法
Updated plunkr
为了以这种方式传递appOnClick,你需要将它声明为如下属性：
export class MyApp {
...
appOnClick = (someText) => {
console.log(someText);
console.log(this.test);
}
}
代替：
export class MyApp {
...
appOnClick(someText){
console.log(someText);
console.log(this.test);
}
}
