कक्षा

Question

जोड़ने के लिए फोकस ईवेंट पर कोणीय 2 मैं कोणीय 2 में एक कोणीय 1 ऐप अपडेट करना चाहता हूं और मेरे पुराने निर्देशों में से एक के साथ कोई समस्या है।

विचार सरल है। जब एक इनपुट फ़ील्ड केंद्रित होता है तो कक्षा को जोड़ा जाना चाहिए (एमडी-इनपुट-फोकस) और दूसरा हटा दिया जाना चाहिए (एमडी-इनपुट-रैपर)। फिर इस प्रक्रिया को "धुंध" घटना पर उलट दिया जाना चाहिए - यानी ध्यान केंद्रित किया गया।

मेरा पुराना निर्देश बस लाइनों शामिल

.directive('mdInput',[ 
    '$timeout', 
    function ($timeout) { 
     return { 
      restrict: 'A', 
      scope: { 
       ngModel: '=' 
      }, 
      link: function (scope, elem, attrs) { 
       var $elem = $(elem); 
       $elem.on('focus', function() { 
         $elem.closest('.md-input-wrapper').addClass('md-input-focus') 
       }) 
       .on('blur', function() { 
       $(this).closest('.md-input-wrapper').removeClass('md-input-focus'); 
       }) 
      } 

आदि ...

मैं स्पष्ट रूप से मेरे निर्देश के लिए क्लासिक शुरुआत है, लेकिन ..... कौशल समाप्त हो गया है

import {Directive, ElementRef, Renderer, Input} from 'angular2/core'; 

@Directive({ 
     selector: '.mdInput', 

}) 

export class MaterialDesignDirective { 
     constructor(el: ElementRef, renderer: Renderer) { 
      // Insert inciteful code here to do the above 
     } 
} 

किसी भी मदद की सराहना की जाएगी।

अद्यतन:

<div class="md-input-wrapper"> 
    <input type="text" class="md-input"> 
</div> 

और बाद तो

<div class="md-input-wrapper md-input-focus"> 
    <input type="text" class="md-input"> 
</div> 

:

HTML की तरह (से पहले इनपुट तत्व ध्यान केंद्रित किया गया था) लगेगा।

इनपुट तत्व एकमात्र ऐसा है जो एक फोकस ईवेंट (और इसलिए निर्देश के लिए लक्ष्य) प्राप्त कर सकता है हालांकि माता-पिता <div> को क्लास एडिशन और हटाने की आवश्यकता होती है।

इसके अलावा मदद

Please see Plunker for help/explanation - यदि कोई

Answer 1

अद्यतन

@Directive({selector: '.md-input', host: { 
    '(focus)': 'setInputFocus(true)', 
    '(blur)': 'setInputFocus(false)', 
}}) 
class MaterialDesignDirective { 
    MaterialDesignDirective(private _elementRef: ElementRef, private _renderer: Renderer) {} 
    setInputFocus(isSet: boolean): void { 
    this.renderer.setElementClass(this.elementRef.nativeElement.parentElement, 'md-input-focus', isSet); 
    } 
} 

मूल

यह आसानी ख मदद कर सकता है बहुत अच्छा होगा ई मेजबान बाइंडिंग को परिभाषित करते हुए ElementRef और Renderer (क्या आप Angular2 में लिए प्रयास करना चाहिए) के बिना किया:

import {Directive, ElementRef, Renderer, Input} from 'angular2/core'; 

@Directive({ 
     selector: '.mdInput', 
     host: { 
     '(focus)':'_onFocus()', 
     '(blur)':'_onBlur()', 
     '[class.md-input-focus]':'inputFocusClass' 
     } 

}) 

export class MaterialDesignDirective { 
     inputFocusClass: bool = false; 

     _onFocus() { 
     this.inputFocusClass = true; 
     } 

     _onBlur() { 
     this.inputFocusClass = false; 
     } 
} 

या थोड़ा अधिक संक्षिप्त

@Directive({ 
     selector: '.mdInput', 
     host: { 
     '(focus)':'_setInputFocus(true)', 
     '(blur)':'_setInputFocus(false)', 
     '[class.md-input-focus]':'inputFocusClass' 
     } 

}) 

export class MaterialDesignDirective { 
     inputFocusClass: bool = false; 

     _setInputFocus(isFocus:bool) { 
     this.inputFocusClass = isFocus; 
     } 
} 

मैं इसे केवल डार्ट में करने की कोशिश की है, जहां यह ठीक काम करता है। मुझे आशा है कि मैंने इसे टीएस में सही तरीके से अनुवादित किया है।

उस तत्व के directives: पर कक्षा को जोड़ने के लिए मत भूलना जहां आप निर्देश का उपयोग करते हैं।

Answer 2

चयनकर्ता का नाम "[]" के रूप में नीचे

@Directive({ 
    selector: '[.mdInput]', 
    host: { 
    '(focus)':'_setInputFocus(true)', 
    '(blur)':'_setInputFocus(false)', 
    '[class.md-input-focus]':'inputFocusClass' 
    } 
}) 

Answer 3

दिखाया पिछले जवाब के अलावा अंदर हो सकता है,, यदि आप विशेष घटक के लिए एक निर्देश को जोड़ने के लिए, नहीं करना चाहती है (

एचटीएमएल:

आप पहले से ही एक निर्देश एक माता पिता के घटक के लिए, आप उपयोग कर रहे आयोनिक 2 पेज या कुछ और), तो आपको पेज निर्माता में private _renderer: Renderer जोड़कर रेंडरर इंजेक्षन और इस तरह घटना लक्ष्य का उपयोग तत्व को अद्यतन है

(dragstart)="dragStart($event)" 

टीएस:

dragStart(ev){ 
    this._renderer.setElementClass(ev.target, "myClass", true) 
} 

संपादित करें: वर्ग दूर करने के लिए सिर्फ कार्य करें:

dragEnd(ev){ 
    this._renderer.setElementClass(ev.target, "myClass", false) 
}