带有 angular 的 a 帧点击事件

Question

I am trying to use a-frame in my existing angular application. Everything works well and i can use the a-scene within my angular component.html. However i want to register 'click' events on an a-frame component and call an existing function on my angular component.ts file

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

Above code works and everytime i click the element a-cylinder it invokes the alert("clicked");

What i want to acheive is to invoke the testFunction() everytime i click the element a-cyclinder.

I have tried many things and was not able to make it working. My understading about the anonymous functions and this is very limited.

What is the right way to register my existing functions to the eventListener.

Answer 1

Maybe I'm missing something.. but why not just use the native click handler on a-cylinder ?

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