Question

我想将下面的jQuery代码写入Angular 4。

jQuery代码适用于应用程序中的所有文本框，但想要以角度运行所有输入文本控件。

困难是

以角度4编写公共事件侦听器。
以角度4操作或遍历父级或兄弟元素。

提前致谢。

$(document).on('focus ', ".mask-text input[type='text'], .mask-text input[type='password']", function (e) {
            $(this).parents(".mask-text").addClass("focused");
        });
        $(document).on('blur ', ".mask-text input[type='text'], .mask-text input[type='password'] ", function (e) {
            if ($(this).val() == undefined) {
                $(this).parents(".mask-text").removeClass("focused");
            }
        });

Answer 1

看起来你是Angular 4的新手。

创建一个名为InputFocus.directive.ts的文件

将以下代码粘贴到其中。

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
 selector: '.mask-text input[type="text"]'
 })
export class HighlightDirective {

   constructor(private el: ElementRef) { 
   }

  @HostListener('focus') onFocus() {
    var cName = this.el.nativeElement.parentElement.className;
    if(cName.indexOf('focused') === -1){
      this.el.nativeElement.parentElement.className += " focused"; 
    }
  }

  @HostListener('blur') onBlur() {
    var data = this.el.nativeElement.value;
    if(!data){
      this.el.nativeElement.parentElement.className = this.el.nativeElement.parentElement.className.replace('focused', '');  
    } 
  }
}

您必须在应用根文件中导入此内容。通常为app.ts

import {HighlightDirective} from './InputFocus.directive'

确保路径正确。

现在找到@NgModule并在你的模块中添加HighlightDirective。见下面的代码。不要复制所有内容，只需在声明中添加 HighlightDirective 。

例如

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App,
  HighlightDirective
  ],
  bootstrap: [ App ]
})

这应该有用。

请参阅Demo Example

如何在Angular 4中编写全局事件监听器？

1 个答案: