web-dev-qa-db-ja.com

EventEmitterでパラメーターを渡す

DOM要素でソート可能なjQueryUIを初期化するディレクティブがあります。 jQueryUI sortableには、特定のアクションでトリガーされるコールバックイベントのセットもあります。たとえば、 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);
  }
}

stopSort()関数でeventおよびuiパラメーターを取得するにはどうすればよいですか？

ここに私がこれまでに持っているもののデモがあります： http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

angulareventemitterangular2-directives
48
Vivendi

EventEmitterは、$eventとしてイベントハンドラーに渡される1つの引数をサポートします。

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

100
pixelbits

pixelbitsの回答は、最終リリースで少し変更されました。複数のパラメーターがある場合は、1つのオブジェクトとして渡すだけです。

子コンポーネント：

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

*更新：「this。」で値を渡す方法については、以下のColin Bの回答をお読みください

14
Alfa Bravo

コメントを追加することはできませんが、Alpha Bravoの答えから、this.eventを渡すことができますが、プロパティ値の短縮形を使用することはできません。

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

また、それらがthis.stopSort.emit({ val1, val2 });としてEventEmmiterを介して渡される場合は、親で次のようにアクセスされることに注意してください。

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

そのため、この種の状況では、命名の一貫性を保つために、省略表現を避けることが望ましい場合があります。

5
Colin B.

子でこのように動作します：

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

これで、親のイベントを取得するだけです！

3
Ignacio Peletier