2016-01-21 20 views
25

मैं कोणीय के लिए नौसिखिया हूं 2. अंगुलरजेएस से कोणीय 2 तक संबंधित घटनाएं क्या हैं? उदाहरण: ng-click से (क्लिक करें)कोणीय 2 - घटनाओं की सूची

कैसे ng-init और अन्य सभी घटनाएं? मुझे वीएस .NET में इंटेलिजेंस नहीं है, इसलिए अनुमान लगाना मुश्किल है।

कोई मदद कृपया!

धन्यवाद

उत्तर

41

डिफ़ॉल्ट संभाला घटनाओं मूल HTML डोम घटक की प्रतिस्पर्धा से मैप किया जाना चाहिए।

onclick --->(click)

onkeypress --->(keypress)

आदि ...

तुम भी अपने कस्टम घटनाओं बना सकते हैं।

हालांकि ngInit एक HTML ईवेंट नहीं है, यह अंगुलर के घटक जीवन चक्र का हिस्सा है, और कोणीय 2 में उन्हें "हुक" का उपयोग करके संभाला जाता है, जो मूल रूप से आपके घटक के अंदर विशिष्ट विधि नाम होते हैं जिन्हें घटक प्रवेश करते समय बुलाया जाएगा विशिष्ट चक्र। जैसा:

ngOnInit

ngOnDestroy

आदि ...

+3

< "डिफ़ॉल्ट संभाला घटनाओं मूल HTML डोम घटक की प्रतिस्पर्धा से मैप किया जाना चाहिए" - आप कृपया अपने स्रोत बोली, या प्रदान कर सकते हैं उपलब्ध घटनाओं की एक सूची? मुझे घटनाओं की कोई आधिकारिक कोणीय 2 सूची नहीं मिली। – jdebon

+3

यहां [अधिक पूर्ण] [http://www.w3fools.com/) सूची [DOM ईवेंट] की सूची है (https://developer.mozilla.org/en-US/docs/Web/Events)। – cvsguimaraes

+0

यहां पर एक और स्थान है checc https://developer.mozilla.org/en-US/docs/Web/Events – Belter

1

(उदाहरण के click Angular1 साथ ng-click तरह के लिए) के ईवेंट प्रबंधित करने निम्न सिंटैक्स का उपयोग कर सकते हैं:

<button (click)="callSomeMethodOfTheComponent()">Click</button> 

यहाँ अंतर यह है कि इस अधिक सामान्य है। मेरा मतलब है कि आप सीधे डीओएम कार्यक्रमों का उपयोग कर सकते हैं लेकिन EventEmitter कक्षा का उपयोग करके परिभाषित कस्टम भी कर सकते हैं।

@Component({ 
    selector: 'my-selector', 
    template: ` 
    <div> 
     <button (click)="callSomeMethodOfTheComponent()">Click</button> 
     <sub-component (my-event)="callSomeMethodOfTheComponent()"></sub-component> 
    </div> 
    `, 
    directives: [SubComponent] 
}) 
export class MyComponent { 
    callSomeMethodOfTheComponent() { 
    console.log('callSomeMethodOfTheComponent called'); 
    } 
} 

@Component({ 
    selector: 'sub-component', 
    template: ` 
    <div> 
     <button (click)="myEvent.emit()">Click (from sub component)</button> 
    </div> 
    ` 
}) 
export class SubComponent { 
    @Output() 
    myEvent: EventEmitter; 

    constructor() { 
    this.myEvent = new EventEmitter(); 
    } 
} 

आशा है कि यह आप में मदद करता है, थियरी

5

यह:

यहां नमूने का वर्णन करता है कि कैसे एक click घटना और एक उप घटक द्वारा trigged एक कस्टम ईवेंट (my-event) को संभालने के लिए है Angular2 के बड़े फायदों में से एक है। प्रत्येक घटना को अब अनुकूलित ng-xxx निर्देश की आवश्यकता नहीं है।
कस्टम तत्वों और सभी अन्य पुस्तकालयों के साथ सभी प्रकार की कस्टम घटनाओं का उत्पादन, यह दृष्टिकोण उड़ नहीं जाता है।

अंगुलर 2 में (eventName)="expression" बाध्यकारी वाक्यविन्यास किसी ज्ञात और अज्ञात घटना की सदस्यता लेने की अनुमति देता है।

$event चर (eventName)="myEventHandler($event)"

भी https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

1

देखें एक महान जगह कोणीय 2 आधिकारिक वेब पेज है समझने के लिए शुरू करने के लिए अभी भी उपलब्ध है।

Here आप देख सकते हैं सभी angular2/आम एनजी-XXX हालांकि अब यह इस प्रकार है के रूप में ngXxxx

enter image description here

मेरे मामले में कोणीय 1 और के बीच अंतर को समझने के लिए सबसे अच्छा तरीका कोणीय 2 कर रहा था ट्यूटोरियल:

  • Tour of Heroes
  • The Developer Guide: यह अनुभवी प्रोग्रामर के लिए कोणीय के लिए एक व्यावहारिक मार्गदर्शिका है जो HTML और जावास्क्रिप्ट में क्लाइंट अनुप्रयोगों का निर्माण कर रहे हैं।बस on उपसर्ग को निकाल कर

    http://www.w3schools.com/jsref/dom_obj_event.asp

    :

संबंधित मुद्दे