EventEmitterでパラメータを渡す

質問

DOM要素上でjQueryUIのソータブルを初期化するディレクティブを持っています。jQueryUI sortableはまた、特定のアクションでトリガーするコールバックイベントのセットを持っています。例えば、あなたが 開始 または 停止 のようなソート要素があります。

このようなイベントからの戻りパラメータを 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();
    }
}

そして、これは私の Component で、これはディレクティブによって生成されたイベントを使用します。

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

どうすれば event と ui のパラメータは、私の stopSort() 関数に渡すことができますか？

今までのデモを紹介します。 http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

どのように解決するのですか？

EventEmitterは1つの引数をサポートしており、その引数は $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);
}

デモ Plnkr