焦点事件上的 Angular2 以添加类

Angular2 on focus event to add class

本文关键字：添加 Angular2 事件 焦点      更新时间：2023-09-26
我希望将 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>需要添加和删除类。

进一步帮助

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

更新 

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

我只在 Dart 中尝试过，它工作正常。我希望我将其正确翻译成 TS。

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

除了前面的答案之外，如果您不想为特定组件添加指令（您已经有父组件的指令，您正在使用 Ionic 2 page 或其他东西），您可以通过在页面构造函数中添加private _renderer: Renderer来注入渲染器，并使用事件目标更新元素，如下所示：

.html：

(dragstart)="dragStart($event)"

TS：

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

编辑：要删除该类，只需执行以下操作：

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

选择器的名称必须位于 "[ ]" 内，如下所示

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

组件上的每个输入上动态捕获焦点/模糊事件：

import { AfterViewInit, Component, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular focus / blur Events';
  constructor(private el: ElementRef) {
  }
  ngAfterViewInit() {
       // document.getElementsByTagName('input') : to gell all Docuement imputs
       const inputList = [].slice.call((<HTMLElement>this.el.nativeElement).getElementsByTagName('input'));
        inputList.forEach((input: HTMLElement) => {
            input.addEventListener('focus', () => {
                input.setAttribute('placeholder', 'focused');
            });
            input.addEventListener('blur', () => {
                input.removeAttribute('placeholder');
            });
        });
    }
}

在此处查看完整代码：https://stackblitz.com/edit/angular-wtwpjr

相关文章：