我有一个指令来初始化一个在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();
}
}
这是我的组件,它使用指令发出的事件：
@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
EventEmitter支持一个参数,它作为$event传递给您的事件处理程序.
原文链接：https://www.f2er.com/angularjs/142787.html将参数传递给发送时将包含在事件对象中：
this.stopSort.emit({ event:event,ui: ui });
然后,当您处理事件时,请使用$event：
stopSort($event) {
alert('event param from Component: ' +$event.event);
alert('ui param from Component: ' + $event.ui);
}
