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

Question

我想将 jQuery 中的以下代码写入 Angular 4.

jQuery 代码适用于应用程序中的所有文本框，但想在 angular 中做同样的事情，其中运行用于所有输入文本控件。

困难是

在angular 4.
操作或遍历 angular 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。请参见下面的代码。不要复制所有内容，只需在 declarations.

中添加 HighlightDirective

例如

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

这应该有效。

见Demo Example

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

How can I write a global event listener in Angular 4?

jquery

angular

addeventlistener

dom-manipulation