Parametri del passaggio con EventEmitter

Question

Ho una direttiva per inizializzare un jQueryUI ordinabile su un elemento DOM. JQueryUI sortable ha anche una serie di eventi di callback che si attivano su determinate azioni. Ad esempio, quando si ordinano gli elementi di ordinamento start o stop.

Vorrei passare i parametri di ritorno da un evento del genere tramite la funzione emit(), in modo da poter effettivamente vedere cosa è successo nella mia funzione di callback. Non ho trovato un modo per passare i parametri attraverso un EventEmiiter.

Attualmente ho il seguente.

mia direttiva:

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

E questo è il mio Component che utilizza l'evento emiited dalla direttiva:

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

Come posso ottenere le event e ui params nella mia funzione stopSort() ?

Ecco una demo di quello che ho finora: http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

Answer 1

EventEmitter supporta un solo argomento, che viene passato come $event al vostro gestore di eventi.

Avvolgere i parametri in un oggetto evento quando si passa a emit:

this.stopSort.emit({ event:event, ui: ui }); 

Poi, quando si gestisce l'evento, utilizzare $event:

stopSort($event) { 
    alert('event param from Component: ' +$event.event); 
    alert('ui param from Component: ' + $event.ui); 
} 

Demo Plnkr

Answer 2

la risposta ai pixelbit è cambiata un po 'con la versione finale. Se hai più parametri, basta passarli come un unico oggetto.

componente figlio: Componente

this.stopSort.emit({event,ui}); 

@Output() stopSort= new EventEmitter<any>(); 

principale:

hereIsHeight(value) { 
     console.log("Height = " + value.event); 
     console.log("Title = " + value.ui); 
    } 

HTML nel componente principale:

<test-child1 (stopSort)="hereIsHeight($event)"></test-child1> 

- Anche se si dispone di valori come: (con la "questo" di fronte)

this.stopSort.emit({this.event,this.ui}); 

essi non funziona, è necessario per cambiarli a qualcos'altro e poi passare attraverso come:

let val1 = this.event; 
let val2 = this.ui; 
this.stopSort.emit({val1,val2}); 

* Aggiornamento: Leggi la risposta di Collin B al di sotto di un modo per passare i valori con "questo ."

Answer 3

non posso aggiungere un commento, ma volevo solo far notare dalla risposta di Alpha Bravo che è possibile passare this.event, semplicemente non è possibile utilizzare il valore proprietà stenografica:

this.stopSort.emit({ event : this.event, ui : this.ui });

---

notare inoltre, se sono passati attraverso l'EventEmmiter come this.stopSort.emit({ val1, val2 }); allora sarebbero accessibili nel genitore come:

hereIsHeight(value) { 
    console.log(`event = ${ value.val1 }`); 
    console.log(`ui = ${ value.val2 }`); 
} 

Quindi evitare la stenografia potrebbe essere preferibile in questo tipo di situazione per mantenere costante la denominazione.