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>

后。

input元素是唯一可以接收焦點事件（因此是指令的目標）的元素，但是父<div>需要添加和刪除類。

進一步幫助

請向Plunker尋求幫助/解釋 - 如果有人可以提供幫助，那就太棒了

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

我只在Dart嘗試過它可以正常工作。 我希望我把它正確地翻譯成TS。

不要忘記將類添加到directives:使用指令的元素。

Answer 2

除了以前的答案，如果您不想為特定組件添加指令（您已經有父組件的指令，您正在使用Ionic 2頁面或其他內容），則通過添加private _renderer: Renderer注入渲染器private _renderer: Renderer頁面構造函數中的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)
}

Answer 3

選擇器的名稱必須在“[]”內，如下所示

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

Answer 4

如果要在組件的每個輸入上動態捕獲焦點/模糊事件：

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