jquery - 如何在angular7应用程序中使用按类型分类的jquery
问题描述
我正在尝试在 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 类而不是其他任何东西。
解决方案
您应该使用@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
推荐阅读
- javascript - Vuejs:无法使用 v-bind 将对象传递给 Web 组件
- odata - UI5 - 通过 OData 注释的值帮助
- puppet - Puppetserver 未指定证书验证错误
- java - 使用带有 java 的 kafka 流导致错误:“从 STARTING 到 PARTITIONS_ASSIGNED 的意外状态转换”
- flutter - Windows 上 VS Code 中的 Flutter 代码覆盖率报告?
- azure-devops - xUnit 不在 Azure DevOps CI 管道上运行
- r - 根据聚合值过滤 data.table 的最有效方法
- android - 为什么使用华为推送服务无法获取pushToken?
- laravel - Laravel 最佳实践从外部 API 监听 JSON 数据
- python - 如何在 python 类中添加可选参数?