javascript - Angular2 在焦点事件上添加类

Question

我想将 Angular 1 应用程序更新到 Angular 2，但我的一个旧指令有问题。

这个想法很简单。当输入字段获得焦点时，应添加一个类 (md-input-focus) 并删除另一个类 (md-input-wrapper)。然后这个过程应该在“模糊”事件上被逆转——即失去焦点。

我的旧指令只包含这些行

.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
      }
}

如有任何帮助，我们将不胜感激。

更新:

HTML 看起来像(在输入元素获得焦点之前):

<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>

之后。

输入元素是唯一可以接收焦点事件的元素(因此也是指令的目标)，但是父元素 <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 中努力实现)，通过定义主机绑定(bind)就可以轻松完成:

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

我只在 Dart 中尝试过，效果很好。我希望我能正确地将它翻译成 TS。

不要忘记将类添加到使用指令的元素的 directives: 中。