使用回调函数作为组件@Input()时的Angular2 Undefined Object属性

Question

我试图将回调函数绑定到一个指令,当事件被触发时,父组件的属性是未定义的

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函数,当单击控制台显示:
- CLICK FROM APP
- undefined

我在Plunker上创建了这个例子

这是一种正确分配这种方式的方法,这样当触发回调时我可以使用我的对象属性吗？

Answer 1

更新了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);
  }
}