EventEmitterでパラメータを渡す

Question

私は、DOM要素のjQueryUIソート可能性を初期化する命令を持っています。 jQueryUIソートには、特定のアクションでトリガーする一連のコールバックイベントもあります。たとえば、startまたはstopの要素をソートするとします。

このようなイベントの戻り値をemit()関数で渡したいので、実際にコールバック関数で何が起こっているのかを実際に確認できます。私はちょうどEventEmiiterを介してパラメータを渡す方法を見つけていない。

私は現在以下を持っています。

マイディレクティブ：

@Directive({ 
    selector: '[sortable]' 
}) 
export class Sortable { 
    @Output() stopSort = new EventEmitter(); 

    constructor(el: ElementRef) { 
     console.log('directive'); 
     var options = { 
      stop: (event, ui) => { 
      this.stopSort.emit(); // How to pass the params event and ui...? 
      } 
     }; 

     $(el.nativeElement).sortable(options).disableSelection(); 
    } 
} 

そして、このディレクティブでemiitedイベントを使用している私のComponentです：

私は私の stopSort()機能に eventと uiのparamsを取得できますか

@Component({ 
    selector: 'my-app', 
    directives: [Sortable], 
    providers: [], 
    template: ` 
    <div> 
     <h2>Event from jQueryUI to Component demo</h2> 

     <ul id="sortable" sortable (stopSort)="stopSort(event, ui)"> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
     </ul> 
    </div> 
    ` 
}) 
export class App { 
    constructor() { 

    } 

    stopSort(event, ui) { // How do I get the 'event' and 'ui' params here? 
    console.log('STOP SORT!', event); 
    } 
} 

？ここで

は、私がこれまで持っているもののデモです：http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

Answer 1

持つEventEmitterはあなたのイベントハンドラに$eventとして渡される引数を一つ、サポートしています。

あなたはemitにそれを渡したときに、イベントオブジェクトには、あなたのパラメータをラップ：あなたは、イベントを処理するとき

this.stopSort.emit({ event:event, ui: ui }); 

その後、$eventを使用します。

stopSort($event) { 
    alert('event param from Component: ' +$event.event); 
    alert('ui param from Component: ' + $event.ui); 
} 

Demo Plnkr

Answer 2

ピクセルビットの回答が最終リリースで少し変更されました。複数のパラメータがある場合は、1つのオブジェクトとして渡します。

子コンポーネント：

this.stopSort.emit({event,ui}); 

@Output() stopSort= new EventEmitter<any>(); 

親コンポーネント：親コンポーネントで

hereIsHeight(value) { 
     console.log("Height = " + value.event); 
     console.log("Title = " + value.ui); 
    } 

HTML： - ：（と

<test-child1 (stopSort)="hereIsHeight($event)"></test-child1> 

また、次のような値を持っている場合「これ」の前に）

this.stopSort.emit({this.event,this.ui}); 

彼らは動作しません、あなたは何か他のものに変更した後、同様に通過する必要があります。

let val1 = this.event; 
let val2 = this.ui; 
this.stopSort.emit({val1,val2}); 

*アップデート：この」で値を渡す方法については、以下の読むコリンBの答え。「

Answer 3

私はあなただけのプロパティ値の速記を使用することはできません、コメントを追加し、ちょうどあなたがthis.eventを渡すことができますアルファブラボーの答えから指摘したかったことができません。

this.stopSort.emit({ event : this.event, ui : this.ui });

---

またthis.stopSort.emit({ val1, val2 });が、その後、彼らは、親でアクセスされるように彼らはEventEmmiterを通過している場合は、注意してください。

hereIsHeight(value) { 
    console.log(`event = ${ value.val1 }`); 
    console.log(`ui = ${ value.val2 }`); 
} 

このような状況では、名前の一貫性を保つために、省略表現を避けることが望ましいかもしれません。