Angular2未定義のオブジェクトの属性コンポーネント@Input（とコールバック関数を使用して）

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; 

} 

湖底OUTSIDE COMPONENT、これがクリックされたときにコンソールが示し、アプリから直接appOnClick関数を呼び出します。
- APP
から]をクリックします - これは、この呼び出し、VALUE

湖底INSIDEコンポーネントを持つべきですコンポーネントで@Input機能を経由してappOnClick機能、クリックされたときにコンソールが表示さ：
- APP
から]をクリックします - 未定義

を私はしました例を作成しましたPlunker

コールバックがトリガされたときに私のオブジェクト属性を処理できるようにこれを正しく割り当てる方法ですか？

Answer 1

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

Answer 2

私はあなたのことを考えますappOnClickメソッドを使用する場合は "（...）"を忘れ、イベントハンドラを設定する場合は "（...）"の代わりに "[...]"を使用してください：

あなたは「@output」でカスタムイベントを定義する必要があり、あなたのサブコンポーネント内でさらに

<my-component (onClick)="appOnClick($event)"></my-component>`, 

：おかげでチームメイト

@Component({ 
    selector: 'my-component', 
    template: `<button (click)="handleClick('CLICK FROM COMPONENT')">BUTTOM INSIDE COMPONENT</button>` 
}) 
export class MyComponent{ 
    @Output() 
    onClick:EventEmitter<string> = new EventEmitter(); 

    handleClick(txt:string) { 
    this.onClick.emit(txt); 
    }  
}