dies. $ El undefined beim Schreiben von Typoskript-Plugin

Question

Ich bin ein Neuling in JavaScript. Hier möchte ich ein Modul erstellen, das angepasstes Attribut und verwandtes Verhalten ermöglicht.

Als erstes importiere ich zu Beginn von customised.ts Directive und ElementRef, während ich Jquery unter main.ts importiert habe. Deshalb schließe ich [customised.ts] nur

import {Directive, ElementRef} from '@angular/core'; 
declare var jQuery: any; 

@Directive ({ 
    selector: '[customised]' 
}) 

Der folgende Code ist Klasse zu exportieren, und Problem ist, wenn ich das nennen. $ El innerhalb der Event-Listener-Funktion, die dies. $ El undefiniert wird.

export class ClearInput { 
    $el: any; 

    constructor(el: ElementRef) { 
    this.$el = jQuery(el.nativeElement); 
    } 


    render():void { 
    let toggleClass = (variable) => { 
     return variable ? 'addClass' : 'removeClass'; 
    }; 

    this.$el.addClass('customised') 
    .bind('input', function() { 
     this.$el[toggleClass(this.$el.val())]('x'); 
    }) 
    .on('mousemove', function(e) { 
     if(this.$el.hasClass('x')) { // error 
     this.$el[toggleClass(this.$el.val())]('onX'); 
     } 
    }) 
    } 

    ngOnInit(): void { 
    this.render(); 
    } 
} 

Die Frage ist:.

1. warum dieser $ el.addClass zweimal ausgeführt wird?
2. Warum dies. $ El unter "Wenn" -Steuerfluss ist undefiniert, dann wirft es einen Fehler: TypeError: Kann die Eigenschaft 'hasClass' von undefined nicht lesen.

Answer 1

dies. $ El ist nicht definiert, weil diese wird höchstwahrscheinlich durch jquery geändert, wenn der Zuhörer mousemove- aufrufen.

Wenn Sie den gleichen Kontext im Listener beibehalten möchten, können Sie stattdessen eine Pfeilfunktion verwenden.

.on('mousemove', e => { 
    if (this.$el.hasClass('x')) { 
    this.$el[toggleClass(this.$el.val())]('onX'); 
    } 
}) 

Wie, warum addClass zweimal ausgeführt wird, vielleicht die machen Funktion wird zweimal ausgeführt?

Answer 2

ändern

constructor(el: ElementRef) { 
    this.$el = jQuery(el.nativeElement); 
    } 

zu

ngAfterViewInit(el: ElementRef) { 
    this.$el = jQuery(el.nativeElement); 
    }