74

我有一个指令来初始化可在 DOM 元素上排序的 jQueryUI。jQueryUI sortable 还具有一组触发某些操作的回调事件。例如，当您开始或停止对元素进行排序时。

我想通过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

4

4 回答 4

143

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

演示计划

于 2016-02-14T15:25:39.127 回答
27

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

*更新：请阅读下面 Colin B 的答案，了解使用“this”传递值的方法。

于 2017-03-15T16:05:22.777 回答
8

我无法添加评论，只是想从 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 }`); 
}

因此，在这种情况下避免使用速记可能更可取，以保持命名一致。

于 2017-07-07T22:14:03.693 回答
4

在孩子身上像这样工作：

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

现在您只需要在父级中获取事件！

于 2018-07-05T06:29:53.117 回答