Angular2在焦点事件上添加类

我想将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看起来像（在输入元素被聚焦之前）：

然后

后。

input元素是唯一可以接收焦点事件（因此是指令的目标）的元素，但是父

需要添加和删除类。

进一步帮助

请向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((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