如何在Angular 4中編寫全局事件偵聽器？

我想寫下面的代碼是在jQuery的成角4.如何在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"); 
      } 
     });

來源

2017-09-05 AmitV

做一個'Directive's與全球選擇，這樣，每個指令將被應用到元素與'.mask-text'的進出口。那麼你可以操縱元素及其子元素。 –

看起來你是新角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

來源

2017-09-05 18:59:46

謝謝兄弟。:-)它正在工作。 – AmitV

回答

相關問題