私は、DOM要素のjQueryUIソート可能性を初期化する命令を持っています。 jQueryUIソートには、特定のアクションでトリガーする一連のコールバックイベントもあります。たとえば、startまたはstopの要素をソートするとします。EventEmitterでパラメータを渡す
このようなイベントの戻り値を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
「ui」が何であるべきかを知ることができません。それはどこから来たのですか?何が参照する必要がありますか? –