jquery - 如何在 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

从“./InputFocus.directive”导入 {HighlightDirective}

确保道路正确。

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

例如

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

这应该有效。

请参阅Demo Example