Question

我是JavaScript的新手。在这里，我想创建一个启用自定义属性和相关行为的模块。

首先，在customised.ts开始时，我导入了Directive和ElementRef，而我在main.ts上导入了Jquery。因此我只包括[customised.ts]

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

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

以下代码是导出类，问题是当我在事件监听器函数中调用它。$ el时，这个。$ el将是未定义的。

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();
  }
}

问题是：

为什么这样。$ el.addClass将被执行两次？
为什么这样。$ el;＆＃34; if＆＃34;控制流是未定义的，然后抛出一个错误：TypeError：无法读取属性＆＃39; hasClass＆＃39;未定义的。

Answer 1

更改

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

到

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

Answer 2

此。$ el 未定义，因为在调用 mousemove 侦听器时，此很可能被jquery更改。

如果要在侦听器中保留相同的上下文，可以使用箭头函数。

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

为什么 addClass 执行两次，可能渲染函数执行两次？

这个。$ el undefined在编写typescript插件时

2 个答案: