オブジェクトエフェクトをイベントエミッタにする方法は？

Question

これは、コンポーネント間の機能参照についての質問であるthisのフォローアップです。

私が持っている場合はParentComponent：

export class ParentComponent { 
    public myParentVariable = 'Hello world'; 

    test() { 
    console.log(this.myParentVariable); 
    } 

    public options: any[] = [ 
    {label: 'Item 1', onClick: this.test}, 
    {label: 'Item 3', onClick: this.test}, 
    {label: 'Item 6', onClick: this.test}, 
    {label: 'Item 2', onClick: this.test} 
    ]; 
} 

あなたは私がonClick財産でtestへの参照を渡す見ることができるように。

その後、私は私がParentComponentからにoptionsを渡すChildComponentを持っている：

<child [options]="options"></child> 

そしてchildに、私はリストがあります：あなたは、私はその後、呼び出しテンプレートに見ることができるように

<ul class="dropdown-list"> 
    <li *ngFor="#option of options" (click)="option.onClick()"></li> 
</ul> 

を前もってonClickを(click)="option.onClick()"とする。

ここから問題は、testへの参照を渡すだけなので、それ以上のものが何であるか分かりません。this.myParentVariableだから代わりにonClickをと呼ぶことができるEventEmitterにしたいので、testを正しいデータバインディングで実行するようにします（hereのように）。

しかし、私は関数を参照するプロパティを含むオブジェクトを含む配列を渡すので、個々のオブジェクトの単一のonClickプロパティをどのようにして作るのかはよく分かりません。EventEmitter

options全体を出力したところ、EventEmitterが悲惨に失敗しました。

これを達成するためのアイデアはありますか？

Answer 1

こののキーワードは、状況によって異なります。ほとんどの場合、この値は関数の呼び出し方法によって決まります。 TypeScriptは型付きのJavaScriptのスーパーセットなので、同じように動作しますので、下のリンクをクリックしてください。

ECMAScript 5は、Function.prototype.bindを導入しました。 f.bind（someObject）を呼び出すと、fと同じ本体とスコープを持つ新しい関数が作成されますが、これは元の関数で発生しますが、新しい関数では関数の仕組みに関係なくbindの最初の引数に永久にバインドされます使用されています。

function's this keyword、bind method

また、代替として、矢印の機能を使用することができます。

Answer 2

親関数を子に渡すことで、親コンポーネントを子に強く結合しています（通常はお勧めできません）。言い換えれば、あなたは子供への親の方法に関する情報を明らかにしています。理想的には、子供は親について何も知るべきではありません。

親の関数参照を子に渡す代わりに、現在のアプローチの代わりに、いくつかのIDやその他の固有の値を渡すことができます（これは、（子）コンポーネントをより再利用可能にします）。クリックイベントが（出力プロパティ/持つEventEmitterを使用して）親にバックアップIDまたは一意の値を渡し、子供に発生した場合：

<li *ngFor="#option of options" (click)="myEmitter.emit(option.uniqueValue)"></li> 

次に親に、適切な関数呼び出しにその値をマッピングし、それを呼び出す：

<child [options]="options" (myEmitter)="doWork($event)"></child> 

doWork(uniqueValue) { 
    // map uniqueValue to some function and call it 
} 

このアプローチのもう一つの付加的な利点は、あなたがthisコンテキストを台無しにしていないということです。