angular - example - Pasar parámetros con EventEmitter

eventemitter angular 6

Question

Tengo una directiva para inicializar un jQueryUI clasificable en un elemento DOM. El jQueryUI sortable también tiene un conjunto de eventos de devolución de llamada que se activan en ciertas acciones. Por ejemplo, cuando start o stop ordenar elementos.

Me gustaría pasar los parámetros de retorno de un evento de este tipo a través de la función emit() , así que realmente puedo 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 los siguientes.

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

¿Cómo puedo obtener los parámetros de event y ui en mi función stopSort() ?

Aquí hay una demostración de lo que tengo hasta ahora: http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

Answer 1

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 maneje el evento, use $event :

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

Demostración Plnkr

Answer 2

Funciona así en niño:

@Output() myEvent: EventEmitter<boolean> = new EventEmitter();
myFunc(value: boolean) {
this.myEvent.emit(value);
}

¡Ahora solo tienes que agarrar el evento en el padre!

Answer 3

La respuesta de pixelbits ha cambiado un poco con la versión final. Si tiene múltiples parámetros, solo páselo como un 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 padre:

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

- También si tienes valores como: (con el "esto" al frente)

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

no funcionarán, necesitas 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 Collin B a continuación para obtener una forma de pasar valores con "esto".

Answer 4

No puedo agregar un comentario, pero solo quería señalar de la respuesta de Alpha Bravo que puede pasar este this.event . No puede usar la taquigrafía del valor de la propiedad:

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

También tenga en cuenta, si se pasan a través del EventEmmiter como this.stopSort.emit({ val1, val2 }); luego se accederá a ellos en el padre como:

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

Por lo tanto, es preferible evitar la taquigrafía en este tipo de situación para mantener la nomenclatura consistente.