कोणीय 2

Question

में निर्देश से इनपुट फ़ील्ड के लिए मॉडल में परिवर्तन का पता लगाने के लिए कैसे करें मेरे पास यह टेक्स्ट टेक्स्टरा के लिए है, यह ngModel के साथ बढ़िया काम कर रहा है और लाइव अपडेट कर रहा है, हालांकि मैं अपने कस्टम-निर्देश को जानना चाहता हूं कि मॉडल बाध्य होने पर इस textarea बदलने के लिए बदल रहा है।

मैं अपने-कस्टम-निर्देश में इस टेक्स्टरेरा के लिए मॉडल परिवर्तन का पता कैसे लगा सकता हूं?

<textarea my-custom-directive class="green" [(ngModel)]="customertext"></textarea> 

Answer 1

अद्यतन

@Directive({ 
    selector: 'xyz', 
    host: {'(ngModelChange)': 'doSomething($event)'} 
}) 
export class Xyz { 
    doSomething(event){... } 
} 

मूल

<textarea my-custom-directive class="green" [(ngModel)]="customertext" 
    (ngModelChange)="doSomething($event) "></textarea> 

[(ngModel)]="customertext" 

का संक्षिप्त रूप है

[ngModel]="customertext" (ngModelChange)="customertext=$event" 

Answer 2

, परिवर्तन का पता लगाने के लिए कई तरीके हैं यह भी ChangeDetectionStrategyघटक में परिभाषित पर निर्भर करता है।

उपयोगी बस इसे क्योंकि सुपर शक्तिशाली होने के लिए, मैं इस सवाल का जवाब आसान बनाने और रिएक्टिव एक्सटेंशन पर ध्यान केंद्रित करेंगे (आरएक्स) ngModel निर्देश के साथ बातचीत का रास्ता, और कोणीय 2 परिवर्तन का पता लगाने के इंजन के साथ सबसे अच्छा एकीकरण है, प्रदर्शन के अनुसार।

सबसे पहले, हम पर जोर देना है कि NgModel तत्व का मूल्य के लिए बाध्य है और सभी परिवर्तनों को एक EventEmitter जो आप करने के लिए सदस्यता के माध्यम से प्रचारित कर रहे हैं की जरूरत है। EventEmitter एक कोणीय 2 प्रकार है जो एक आरएक्स विषय है जो मूल रूप से एक वस्तु है जो घटनाओं/डेटा को "प्रेषित" (उत्सर्जित) कर सकता है और "प्राप्त" डेटा पर भी प्रतिक्रिया दे सकता है। तो आरएक्स भूमि में इसका एक पर्यवेक्षक और पर्यवेक्षक है।

एनजीमोडेल पर "ngOnChanges" विधि का उल्लेख करने योग्य भी है जो परिवर्तन घटनाओं को संभालने के लिए हैंडलर प्राप्त करता है, लेकिन हम आरएक्स दृष्टिकोण पर ध्यान केंद्रित करेंगे।

तो, हमें उस पर्यवेक्षक तक पहुंच प्राप्त करने और इसकी सदस्यता लेने की आवश्यकता है, बढ़िया!

पहुंच प्राप्त करने के लिए हम निर्भरता इंजेक्शन का उपयोग करते हैं, यह घोषणा करके कि हम अपने निर्देश के निर्माता में NgModel प्राप्त करना चाहते हैं।

अब हमें सावधान रहने की भी आवश्यकता है, हमें यह सुनिश्चित करने की ज़रूरत है कि हम उस NgModel को प्राप्त करें अन्यथा हमें त्रुटियां होंगी।

हम इसे चुपचाप कर सकते हैं, एक निर्देश चयनकर्ता बनाने के द्वारा कि लागू करता है एक NgModel तत्व, जैसे: 'चयनकर्ता': '[myCustomDirective] [ngModel]', अब अगर ngModel तत्व यह जीता का हिस्सा नहीं है ' हमारे निर्देशक के चयनकर्ता से मेल नहीं खाते।

या, हम शोर कर सकते हैं और चुपचाप बाहर नहीं जा सकते हैं, हम निर्भरता इंजेक्शन को @Optional के रूप में चिह्नित करते हैं और यदि यह शून्य है तो हम एक स्पष्ट अपवाद फेंक सकते हैं कि क्या गुम है। यदि हम इसे @Optional कोणीय के रूप में चिह्नित नहीं करेंगे, तो लापता निर्भरता के बारे में एक सामान्य संदेश फेंक देगा, ठीक है लेकिन अच्छा नहीं है।

अब, एक उदाहरण:

import {Directive, Optional} from 'angular2/core'; 
import {NgModel}from 'angular2/common'; 

@Directive({ 
    selector: '[myCustomDirective][ngModel]' 
}) 
export class MyCustomDirective { 
    constructor(@Optional() public model: NgModel) { 
    if (!model) 
     throw new Error ("myCustomDirective requires ngModel."); 

    // this code should be in a designated functions... 

    // register to incoming changes to the model 
    // we can also transform values..., for example take only distinct values... 
    // this.model.update.distinctUntilChanged()... 
    let subscription = this.model.update.subscribe((newValue) => { 
     // Changes happen here, do something with them... 
     // note that the value of this.model is still the old value 
     // The local parameter "newValue" holds the new value. 
    }); 

    // We can also change the value of the model: 
    this.model.update.emit('something...'); 
    } 
} 

आशा है कि मदद की।

Answer 3

Agnular2 में परिवर्तनों का पता लगाने के लिए अलग-अलग दृष्टिकोण हैं, और आप जिन शर्तों का उपयोग कर रहे हैं उनके अनुसार, वे उल्टा और डाउनसाइड्स होंगे। कोणीय आप change सहित तत्वों के सभी मानक घटनाओं के लिए बाध्य करने देता है। इसलिए एक रूप तत्व के रूप में इस मामले में आप बस का उपयोग कर सकते हैं:

<textarea my-custom-directive class="green" [(ngModel)]="customertext" (change)="doSomething($event)"></textarea> 

घटना देशी JavaScript घटना हो जाएगा, तो आप प्राप्त कर सकते हैं originalEvent, target, और भी परिवर्तन संपत्ति और अपने मूल्य प्राप्त करने के लिए:

doSomething (e) { 
    let whatChanged = e.target.getAttribute('ng-reflect-name'); 
    let newValue = this[whatChanged]; 
    console.log(whatChanged, newValue); 
} 

यह विशेष रूप से अच्छी तरह से काम करता है जब आप सभी में परिवर्तन/एक के रूप में तत्वों में से कुछ के लिए देखना चाहते हैं। हैश-रेफरेंसिंग का उपयोग करना भी इस दृष्टिकोण से काफी आगे है।

Answer 4

कोशिश अपने निर्देश में जोड़ें:

@HostListener('input') onInput() { 
     console.log('on input'); 
} 

Answer 5

model (पर पता लगाने के परिवर्तन) Input() के रूप में निर्देश और नीचे की तरह ngOnChange() उपयोग करने के लिए दर्रा।

import {Directive, ElementRef, Input, OnChanges} from '@angular/core'; 

@Directive({ 
    selector: '[myCustomDirective]' 
}) 
export class MyCustomDirective implements OnChanges { 

    @Input() myCustomDirective: any; 

    constructor(private el: ElementRef) {} 

    ngOnChanges(changes) { 
     if (changes.myCustomDirective) { 
      console.log('chnaged'); 
     } 
    } 

} 

का तरीका यहां बताया निर्देश के लिए इनपुट के रूप में मॉडल से पारित सकता है:

<textarea [myCustomDirective]="customertext" class="green" [(ngModel)]="customertext"></textarea>