Tengo una directiva para inicializar un jQueryUI clasificable en un elemento DOM. El ordenable jQueryUI también tiene un conjunto de eventos de devolución de llamada que se activan en ciertas acciones. Por ejemplo, cuando comienza o deja de ordenar elementos.
Me gustaría pasar los parámetros de retorno de dicho evento a través de la función emit() , para poder ver qué sucedió en mi función de devolución de llamada. Simplemente no he encontrado una manera de pasar parámetros a través de un EventEmiiter .
Actualmente tengo lo siguiente.
Mi directiva:
@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(); } } Y este es mi Component que usa el evento emitido por la directiva:
@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-ns"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-ns"></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); } } ¿Cómo puedo obtener el event y los parámetros de la ui de usuario en mi función stopSort() ?
Aquí hay una demostración de lo que tengo hasta ahora: http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info
EventEmitter admite un argumento, que se pasa como $event a su controlador de eventos.
Envuelva sus parámetros en un objeto de evento cuando lo pase para emit :
this.stopSort.emit({ event:event, ui: ui }); Luego, cuando manejes el evento, usa $event :
stopSort($event) { alert('event param from Component: ' +$event.event); alert('ui param from Component: ' + $event.ui); }La respuesta de pixelbits ha cambiado un poco con el lanzamiento final. Si tiene varios parámetros, simplemente páselo como un solo objeto.
Componente hijo:
this.stopSort.emit({event,ui}); @Output() stopSort= new EventEmitter<any>();Componente principal:
hereIsHeight(value) { console.log("Height = " + value.event); console.log("Title = " + value.ui); }HTML en el componente principal:
<test-child1 (stopSort)="hereIsHeight($event)"></test-child1>-- También si tienes valores como: (con el "esto" delante)
this.stopSort.emit({this.event,this.ui});no funcionarán, debe cambiarlos a otra cosa y luego pasar como:
let val1 = this.event; let val2 = this.ui; this.stopSort.emit({val1,val2});* Actualización: lea la respuesta de Colin B a continuación para conocer una forma de pasar valores con "esto".
No puedo agregar un comentario, pero solo quería señalar de la respuesta de Alpha Bravo que puede pasar this.event , simplemente no puede usar la abreviatura de valor de propiedad:
this.stopSort.emit({ event : this.event, ui : this.ui }); También tenga en cuenta que si se pasan a través de EventEmmiter como this.stopSort.emit({ val1, val2 }); entonces se accedería a ellos en el padre como:
hereIsHeight(value) { console.log(`event = ${ value.val1 }`); console.log(`ui = ${ value.val2 }`); }Por lo tanto, evitar la taquigrafía podría ser preferible en este tipo de situación para mantener la consistencia en la nomenclatura.