Передача параметров с помощью EventEmitter

У меня есть директива инициализации сортировки jQueryUI на элементе DOM. У сортировки 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, который использует событие, указанное директивой:

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

Как мне получить параметры event и ui в моей функции stopSort()?

Вот демонстрация того, что у меня до сих пор: http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

Ответы

Ответ 1

EventEmitter поддерживает один аргумент, который передается как $event вашему обработчику событий.

Оберните свои параметры в объект события, когда вы передадите его на emit:

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

Затем, когда вы обрабатываете событие, используйте $event:

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

Демо Plnkr

Ответ 2

Ответ на

pixelbits немного изменился с окончательной версией. Если у вас есть несколько параметров, просто передайте их как один объект.

Детский компонент:

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

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

Родительский компонент:

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

HTML в родительском компоненте:

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

- Также, если у вас есть значения, например: (с "this" спереди)

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

они не будут работать, вам нужно изменить их на что-то еще, а затем пройти через:

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

* Обновление: прочитайте ниже ответ Collin B, чтобы передать значения с помощью "this".

Ответ 3

Я не могу добавить комментарий, но просто хотел указать из ответа Alpha Bravo, что вы можете передать this.event, вы просто не можете использовать сокращенное значение свойства:

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

Также обратите внимание: если они передаются через EventEmmiter как this.stopSort.emit({ val1, val2 });, тогда они будут доступны в родительском объекте как:

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

Поэтому избегать сокращения может быть предпочтительным в этом типе ситуации, чтобы сохранить именование согласованным.