Angular2 在焦点事件上添加类 [英] Angular2 on focus event to add class

问题描述

我希望将 Angular 1 应用更新为 Angular 2，但我的旧指令之一出现问题.

这个想法很简单.当输入字段被聚焦时，应该添加一个类(md-input-focus)并删除另一个类(md-input-wrapper).然后这个过程应该在blur"事件上反转 - 即焦点丢失.

我的旧指令只包含这些行

.directive('mdInput',['$超时',功能($超时){返回 {限制:'A'，范围: {ngModel: '='},链接:函数(范围，元素，属性){var $elem = $(elem);$elem.on('焦点', function() {$elem.closest('.md-input-wrapper').addClass('md-input-focus')}).on('模糊', function() {$(this).closest('.md-input-wrapper').removeClass('md-input-focus');})}

等等...

我的指令显然有经典的开始，但已经用完了......技能

import {Directive, ElementRef, Renderer, Input} from 'angular2/core';@指示({选择器:'.mdInput'，})导出类 MaterialDesignDirective {构造函数(el:ElementRef，渲染器:渲染器){//在此处插入煽动性代码以执行上述操作}}

任何帮助将不胜感激.

更新:

HTML 看起来像(在输入元素被聚焦之前):

<input type="text" class="md-input">

然后

<input type="text" class="md-input">

之后.

输入元素是唯一可以接收焦点事件(因此也是指令的目标)的元素，但是父元素

需要添加和删除类.

进一步帮助

请参阅 Plunker 寻求帮助/解释 - 如果有人可以提供帮助，那就太好了

解决方案

更新

@Directive({selector: '.md-input', host: {'(焦点)': 'setInputFocus(true)','(模糊)': 'setInputFocus(false)',}})类 MaterialDesignDirective {MaterialDesignDirective(私有_elementRef:ElementRef，私有_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';@指示({选择器:'.mdInput'，主持人: {'(焦点)':'_onFocus()','(模糊)':'_onBlur()','[class.md-input-focus]':'inputFocusClass'}})导出类 MaterialDesignDirective {inputFocusClass: bool = false;_onFocus() {this.inputFocusClass = true;}_onBlur() {this.inputFocusClass = false;}}

或者更简洁一些

@Directive({选择器:'.mdInput'，主持人: {'(焦点)':'_setInputFocus(真)'，'(模糊)':'_setInputFocus(false)','[class.md-input-focus]':'inputFocusClass'}})导出类 MaterialDesignDirective {inputFocusClass: bool = false;_setInputFocus(isFocus:bool) {this.inputFocusClass = isFocus;}}

我只在 Dart 中尝试过，效果很好.我希望我把它正确翻译成 TS.

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

I'm looking to update an Angular 1 app to Angular 2 and am having an issue with one of my old directives.

The idea is simple. When an input field is focused a class should be added (md-input-focus) and another be removed (md-input-wrapper). Then this process should be reversed on "blur" event - i.e. focus lost.

My old directive simply included the lines

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

etc...

I obviously have the classic start to my directive but have run out of.....skill

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

Any help would be appreciated.

UPDATE:

The HTML would look like (before the input element was focused):

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

and then

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

after.

The input element is the only one which can receive a focus event (and therefore the target for the directive) however the parent <div> requires the class addition and removal.

Further help

Please see Plunker for help/explanation - would be great if someone could help

解决方案

Update

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

Original

This can easily be done without ElementRef and Renderer (what you should strive for in Angular2) by defining host bindings:

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

or a bit more terse

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

I tried it only in Dart where it works fine. I hope I translated it correctly to TS.

Don't forget to add the class to the directives: of the element where you use the directive.

这篇关于Angular2 在焦点事件上添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！