使用EventEmitter

时间:2016-02-14 10:34:26

标签: angular eventemitter angular2-directives

我有一个指令来初始化DOM元素上的jQueryUI sortable。 jQueryUI sortable还有一组触发某些操作的回调事件。例如,当您startstop排序元素时。

我想通过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函数中获取uistopSort()参数?

以下是我到目前为止的演示:http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

4 个答案:

答案 0 :(得分:93)

EventEmitter支持一个参数,该参数作为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); }

Alert ticker

Demo Plnkr

答案 1 :(得分:12)

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>

- 如果您有以下值:(使用&#34;此&#34;在前面)

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

它们无法正常工作,您需要将它们更改为其他内容,然后通过:

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

*更新:请阅读下面的Colin B的回答,了解使用&#34;这传递值的方法。&#34;

答案 2 :(得分:4)

我无法添加评论,但只是想从Alpha Bravo的回答中指出您可以通过this.event,您只能使用属性值简写:< / p>

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

因此,在这种情况下,避免速记可能更为可取,以保持命名的一致性。

答案 3 :(得分:3)

在子级中像这样工作:

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

现在,您只需要在父级参加活动!