EventEmitter

Question

के साथ पास पैरामीटर मेरे पास एक DOM तत्व पर एक jQueryUI क्रमबद्ध करने के लिए निर्देश है। 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 घटना के निर्देश से emiited का उपयोग करता है:

@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

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

Demo Plnkr

Answer 2

अंतिम रिलीज के साथ पिक्सेलबिट्स जवाब थोड़ा बदल गया है। यदि आपके पास एकाधिक पैरामीटर हैं, तो बस इसे एक ऑब्जेक्ट के माध्यम से पास करें।

बाल घटक:

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.stopSort.emit({this.event,this.ui}); 

वे काम नहीं करेंगे, तो आप उन्हें कुछ और करने के लिए बदलने के लिए और उसके बाद की तरह के माध्यम से पारित की जरूरत है:

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

* अद्यतन: नीचे कोलिन बी के जवाब पढ़ें एक तरह से "इस के साथ मान पास करने के लिए ।"

Answer 3

मैं नहीं टिप्पणी जोड़ सकते हैं, लेकिन सिर्फ अल्फा ब्रावो के जवाब से बाहर बात करने के लिए है कि आप 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 }`); 
} 

तो नामकरण को बनाए रखने के लिए इस प्रकार की स्थिति में शॉर्टेंड से परहेज करना बेहतर हो सकता है।