Angular 中的腳本和使用 A-Frame 的 typescript 的問題

Question

我在使用 A-Frame 制作 3D 對象並與之交互的一段 HTML 代碼的腳本時遇到了角度問題。 問題是你可以將聲音作為一個框架的屬性來玩，但是當腳本被嘗試或從打字稿中它不起作用並且一切都已經嘗試過。 我希望他們能幫助我

<script>
AFRAME.registerComponent('play', {
  init: function () {
    console.log("entro al script play");
    var variable = document.querySelector('#yellow');
    this.variable.addEventListener('click' , function(){
      variable.components.sound.playSound();
    });
  }
});
AFRAME.registerComponent('stop', {
  init: function () {
    console.log("entro al script stop");
    var variable = document.querySelector('#yellow');
    this.variable.addEventListener('click' , function(){
      variable.components.sound.stopSound();
    });
  }
});

<a-box id="yellow" color="yellow" position="0 0 -5" sound="src:#bichota">
  <!-- Play -->
  <a-sphere color="green" radius="0.25" position="-1 1 0" play></a-sphere>
  <!-- Stop -->
  <a-sphere color="red" radius="0.25" position="1 1 0" stop></a-sphere>
</a-box>

在打字稿中，我收到此錯誤“屬性‘組件’在‘元素’類型上不存在”

var entity= document.querySelector('#yellow') ;
if(entity != null){
  console.log("enity" , entity);
  entity.components.sound.playSound();
}

Answer 1

在 Angular 中使用 aframe，最好遵循 angular 的做法，而不是直接涉及 DOM 操作。

如需完整演示，您可以在 Github 上克隆我的演示項目。

應用程序組件.html

<a-scene>
    <a-assets>
      <audio id="bichota" src="../assets/test.mp3" preload="auto"></audio>
    </a-assets>

    <a-box id="yellow" color="yellow" position="0 0 -5" sound="src:#bichota" #yellowBox>
      <a-sphere cursor="rayOrigin: mouse" color="green" radius="0.25" position="-1 1 0" (click)="playSound()"></a-sphere>
      <a-sphere cursor="rayOrigin: mouse" color="red" radius="0.25" position="1 1 0"  (click)="stopSound()"></a-sphere>
    </a-box>
</a-scene>

• #yellowBox - 用於#yellowBox稍后在組件邏輯中引用它
• cursor="rayOrigin: mouse" - 用於啟用鼠標點擊元素。 需要在 a-frame 元素中指定光標。 有關詳細信息，您可以閱讀文檔。
• (click)="xxxx()" - 用於綁定點擊事件

app.component.ts

export class AppComponent {
  // refer to #yellowBox in the html
  @ViewChild('yellowBox') yellowBox!: ElementRef;
  
  playSound() {
    console.log("play")
    this.yellowBox.nativeElement.components.sound.playSound();
  }

  stopSound() {
    console.log("stop")
    this.yellowBox.nativeElement.components.sound.stopSound();
  }
}