Pass Parameter mit EventEmitter

Question

Ich habe eine Direktive, um eine jQueryUI Sortierung auf ein DOM-Element zu initialisieren. Die Sortierfunktion jQueryUI verfügt auch über eine Reihe von Rückrufereignissen, die bei bestimmten Aktionen ausgelöst werden. Zum Beispiel, wenn Sie start oder stop Sortierelemente.

Ich möchte die Rückgabeparameter von einem solchen Fall durch die emit() Funktion zu übergeben, so kann ich wirklich sehen, was in meinem Callback-Funktion passiert. Ich habe einfach keine Möglichkeit gefunden, Parameter über eine EventEmiiter zu übergeben.

Ich habe derzeit folgendes.

Meine Richtlinie:

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

Und das ist mein Component, die das Ereignis in der Richtlinie emiited verwendet:

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

Wie kann ich die event und ui params in meiner stopSort() Funktion erhalten ? Hier

ist eine Demo von dem, was ich bisher: http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

Answer 1

EventEmitter ein Argument unterstützt, die als $event zu Ihrem Event-Handler übergeben wird.

Ihre Parameter in einem Ereignisobjekt Wickeln, wenn Sie es emit passieren:

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

Dann, wenn Sie das Ereignis zu behandeln, verwenden $event:

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

Demo Plnkr

Answer 2

Die Antworten der Pixelbits haben sich mit der endgültigen Version ein wenig verändert. Wenn Sie mehrere Parameter haben, übergeben Sie sie einfach als ein Objekt.

Kinder Komponente:

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

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

Geordnete Komponente:

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

HTML in Stammkomponente:

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

- Auch wenn Sie Werte wie: (mit "dieses" vor)

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

sie müssen nicht, Sie arbeiten sie, um etwas anderes zu ändern, und dann durch wie passieren:

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

* Update: unter Collin B Antwort Lesen Sie nach einer Möglichkeit, Werte passieren mit „this ."

Answer 3

Ich kann keinen Kommentar hinzufügen, aber wollte nur von Alpha Bravo Antwort darauf hinweisen, dass Sie this.event passieren kann, kann man einfach nicht Eigenschaftswert Stenografie verwenden:

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

---

beachten sie auch, wenn sie durch die EventEmmiter weitergegeben werden als this.stopSort.emit({ val1, val2 }); dann würden sie, wie in der Mutter zugegriffen werden:

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

In solchen Situationen kann es daher besser sein, die Kurzschrift zu vermeiden, um die Benennung konsistent zu halten.