angular 的框架点击事件

Question

我正在尝试在我现有的 angular 应用程序中使用框架。一切正常，我可以在 angular component.html 中使用 a-scene。但是我想在 a-frame 组件上注册 'click' 事件并在我的 angular component.ts 文件

上调用现有函数

component.html

<a-scene cursor="rayOrigin: mouse">
 <video id="videoBunny" preload="auto" src="Start.mp4" autoplay loop="true" crossOrigin="anonymous" muted></video>
   <a-videosphere src="#videoBunny">
       <a-cylinder click-event="event: click" position="1 0 -3" radius="0.1" height="1" color="#FFC65D" shadow></a-cylinder>
   </a-videosphere>
 <a-entity camera look-controls="reverseMouseDrag: true"></a-entity>
</a-scene>

component.ts

ngAfterViewInit(): void {
 aframe.registerComponent('click-event', {
  dependencies: ['material'],
  init: function () {
    const data = this.data;
    const el = this.el;
      el.addEventListener(data.event,()=>{
        alert("clicked");
      });
  }
 });
}

testFunction(): void {
  alert("test function -  click");
}

以上代码有效，每次我单击 a-cylinder 元素时，它都会调用警报（“已单击”）；

我想要实现的是每次单击元素 a-cyclinder 时调用 testFunction()。

我尝试了很多东西，但都无法正常工作。我对匿名函数的理解非常有限

将现有函数注册到 eventListener 的正确方法是什么。

Answer 1

也许我遗漏了什么..但为什么不直接在 a-cylinder 上使用本机 click 处理程序？

<a-cylinder (click)="testFunction($event)" position="1 0 -3" radius="0.1" height="1" color="#FFC65D" shadow></a-cylinder>


testFunction(event): void {
  alert("test function -  click, event info: ", event);
}

angular 的框架点击事件

a-frame click events with angular

javascript

aframe

angular