我正在寻找将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>需要添加和删除类.
进一步帮助
Please see Plunker for help/explanation – 如果有人可以帮忙的话会很棒
解决方法
更新
@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,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.
不要忘记将类添加到指令中：使用指令的元素.