角度 – 使用EventEmitter传递参数
发布时间:2020-12-17 07:41:10 所属栏目:安全 来源:网络整理
导读:我有一个指令来初始化一个在DOM元素上排序的jQueryUI. jQueryUI可排序也有一组在某些操作上触发的回调事件.例如,当您为 start或 stop排序元素. 我想通过emit()函数从这样的事件传递返回参数,所以我可以看到在我的回调函数中发生了什么.我没有找到一种通过Eve
我有一个指令来初始化一个在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); } } 如何在我的stopSort()函数中获取事件和ui参数? 这是我迄今为止所做的一个演示:http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info
EventEmitter支持一个参数,它作为$event传递给您的事件处理程序.
将参数传递给发送时将包含在事件对象中: 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |