角2：子コンポーネントに関数を渡す方法

Question

角2のアプリケーションでは、保存ボタンをクリックすると、親コンポーネントの内容に、trueまたはfalseを返す関数isDirty()が呼び出される 'SaveComponent'があるとします。変更されました）。 'SaveComponent'の理由は、多くのコンポーネントで共有されているスタイルや他のウィジェットが関連付けられていることに注意してください。

は、現在、親要素のそれぞれに定義されてisDirty機能があり、親テンプレート内で次のように機能がSaveComponentに渡されます。

<save-component [isDirty]="isDirty"> </save-component> 

あなたは気にしている場合は、参照するには、SaveComponentの簡易版...このような何かを定義している

import {Component, Input} from 'angular2/core'; 

@Component({ 
    selector: 'save-component', 
    templateUrl: 'who-cares-to-know.component.html' 
}) 

export class SaveComponent { 
    @Input() isDirty; 
} 

当初はのみに動作します。 isDirty関数は、コンテンツが変更されてもfalse（または一度だけ呼び出される？）を返します。関数が親コンポーネントから呼び出されたときに正しく機能することに注意してください。

どういうところが間違っていますか？ @Inputまたは他の手段を介して親コンポーネントから子コンポーネントに関数を渡すことは可能ですか？ありがとう！

Answer 1

問題は、参照時にメソッドのコンテキスト（「this」というキーワード）が失われてしまうことです。

私はそのようなものを使用します：

getIsDirty() { 
    return() => { 
    return this.isDirty(); 
    } 
} 

矢印機能では、あなたがこの字句を使用することができます。後者はコンポーネントインスタンス自体に対応します。

そして、それをサブコンポーネントにこの方法提供：

<save-component [isDirty]="getIsDirty()"> </save-component>