Angular中的脚本和使用a-Frame的typescript的问题

Question

我对一段HTML代码的脚本有一个角度问题，该代码使用a-Frame来制作3D对象并与之交互。问题是，你可以将声音作为a-Frame的属性来播放，但当尝试脚本或从typescript中尝试时，它不起作用，所有东西都已经尝试过了。我希望他们能帮助我

<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>

在打字脚本中，我得到了这个错误"；类型"Element"上不存在属性"components"；

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

Answer 1

要在Angular中使用aframe，最好遵循Angular实践，而不是直接涉及DOM操作。

为了进行完整的演示，您可以在Github上克隆我的演示项目。

app.component.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-用于以后在组件逻辑中引用angular
• cursor="rayOrigin: mouse"-用于启用鼠标点击元素。需要在a帧元素中指定光标。有关详细信息，您可以阅读文档
• (click)="xxxx()"-用于绑定点击事件

应用程序组件.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();
}
}