如何在 Angular 7 应用程序中使用带有类型的 jquery 类

Question

我正在尝试在 Angular 7 应用程序中使用 jquery 操作 dom，如下所示

我通过 npm 安装的 jquery 和 jquery 输入都成功了。但是还没有找到一种方法来区分Event类以便引用jquery Event。

请看下面的示例代码

import { Component, OnInit } from '@angular/core';
declare var $:JQueryStatic;
import { AoEditorStore } from '../common/AoEditorStore';
import { ShimFactory } from './shim/ShimFactory';


@Component({
  selector: 'app-dom-editor',
  templateUrl: './dom-editor.component.html',
  styleUrls: ['./dom-editor.component.scss']
})
export class DomEditorComponent implements OnInit {


  constructor(private toolSelector : AoEditorStore , private shimFactory : ShimFactory) { 

  }

  ngOnInit() {
    let domEditor = this ;
    $('.editor-div').on('click' , domEditor.onElementClick).on('mouseover' , domEditor.onElementHover) ; 
  } 

  onElementClick( evt : Event) :void {
    if(this.toolSelector.isToolSelected()){

        let shim = this.shimFactory.getShimNew(this.toolSelector.getSelectedTool(), evt.pageX , evt.pageY, evt.currentTarget); 
    }

    console.log('dom editing div clicked') ;
  }

  onElementHover(obj : Event):void{
    console.log('hover on dom editing div') ;
  }

}

挑战在于，虽然 jquery $ 被识别，但当我将处理程序的参数称为 Event 时，它默认为 lib.dom.d.ts 事件类而不是 jquery 事件。

所以当我尝试访问 evt.pageX 时，它给了我一个编译错误。

如何确保传递给我的 jquery 处理程序的事件对象默认为 jquery Event 类而不是其他任何东西。

Answer 1

您应该使用@HostListener 而不是 jquery 处理事件。

添加条件event.target.matches('.editor-div')检查元素来源。

@HostListener('document:click', ['$event'])
    onclick(event) {
        if(event.target.matches('.editor-div')) {
            alert('click to editor div')
        }
    }

    @HostListener('document:mouseover', ['$event'])
    mouseover(event) {
        if(event.target.matches('.editor-div')) {
            alert('hover to editor div')
        }
    }

现场演示：https://stackblitz.com/edit/angular-hover-click-hostlistener