Question

我的子组件中有鼠标移动主机监听器。

我在父组件中调用此子项。但是当用户移动鼠标时，有时鼠标移动没有检测到。但是如果我将主机侦听器代码移动到父组件，则其检测鼠标无缝移动

@HostListener('mousemove', ['$event'])
@HostListener('touchmove', ['$event'])
onmousemove(e: MouseEvent) {
    console.log("mousemove demo events",e.clientX,e.clientY) 


}

Answer 1

谢谢你们。

我发现了这个问题。我添加的主机监听器特定于我的子组件的范围，因此在组件外部没有检测到鼠标移动。所以我添加了 NG-内容在我的孩子中，并在孩子内部调用我的父html内容，所以现在它检测到鼠标移动。例如

<child>
<div>test</div> //Parent component html
</child>

Answer 2

您可能需要将事件冒泡到父级（来自子级）。

在您的子组件中：

connection = vertica_python.connect(**conn_info)
cursor = connection.cursor()
with open("C:\DataBases\csv\%s_%s.csv" % (FILE_NAME, TABLE_NAME), "rb") as fs:
my_file = fs.read()
cursor.copy("COPY %s.%s from stdin PARSER fcsvparser(type='traditional', delimiter=';', record_terminator='\n',)" %(SCHEMA_NAME, TABLE_NAME), my_file)
connection.commit()
connection.close()

然后在子组件中捕获onmousemove事件并发出它：

@Output() mouseMoveEmitter = new EventEmitter();

在您的父html中，您可以捕获发出的事件，如下所示：

this.mouseMoveEmitter.emit(e);

Answer 3

@HostListener('mousemove', ['$event'])
@HostListener('touchmove', ['$event'])
onmousemove(e: MouseEvent) {
    console.log("mousemove demo events",e.clientX,e.clientY) 
}

你以前用过这种方法吗？你在哪里结合触摸和鼠标事件？我从来没有见过它，我无法肯定地说它不会起作用，但我总是认为它们是独立的事件类型。 TouchEvents是他们自己的typescript类。我总是通过以下方式访问触摸位置：

event.changedTouches[0].clientX, event.changedTouches[0].clientY

而不仅仅是clientX / clientY。我想浏览器可能正在做一些事情来包装或将它们翻译成同样的东西。

鼠标移动主机监听器有时不会监听子组件的角度2

3 个答案: