Angular2在焦点事件上添加类 [英] Angular2 on focus event to add class
问题描述
我正在考虑将Angular 1应用更新为Angular 2,并且我的旧指令存在问题。
I'm looking to update an Angular 1 app to Angular 2 and am having an issue with one of my old directives.
这个想法很简单。当聚焦输入字段时,应添加一个类(md-input-focus),另一个类被删除(md-input-wrapper)。然后这个过程应该在模糊事件上反转 - 即焦点丢失。
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.
我的旧指令只包括行
.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');
})
}
等...
我显然对我的指令有经典的开始,但已经耗尽了......技能
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.
更新:
HTML看起来像(在输入元素聚焦之前):
The HTML would look like (before the input element was focused):
<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>
需要添加和删除类。
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.
进一步的帮助
请参阅Plunker寻求帮助/解释 - 如果有人可以提供帮助会很棒
Please see Plunker for help/explanation - would be great if someone could help
推荐答案
更新
@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):
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;
}
}
或者更简洁
@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。
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屋!