angular - EventEmitter के साथ पैरामीटर पास करें




angular2-directives (3)

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

डेमो Plnkr

मेरे पास 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 जो निर्देशन द्वारा उत्सर्जित घटना का उपयोग करता है:

@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 stopSort() कैसे प्राप्त कर सकता हूं?

यहां मेरे पास अब तक का एक डेमो है: http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info


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

बाल घटक:

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

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


मैं एक टिप्पणी नहीं जोड़ सकता, लेकिन सिर्फ अल्फा ब्रावो के जवाब से इंगित करना चाहता था कि आप इसे पारित कर सकते हैं। इसके this.event , आप केवल संपत्ति मूल्य आशुलिपि का उपयोग नहीं कर सकते हैं:

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

यह भी ध्यान दें, यदि वे EventEmmiter के माध्यम से इस रूप में पारित किए जाते हैं ।stopSort.emit this.stopSort.emit({ val1, val2 }); तब उन्हें अभिभावक के रूप में एक्सेस किया जाएगा:

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

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





angular2-directives