Javascript 到 Angular 2 : document.querySelector('el').emit('em') 到 @viewChild

Question

如何转换

HTML

<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1">
  <a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-entity>

JS

document.querySelector('#fading-cube').emit('fade');

这是我在 Angular 2 中的代码，它不起作用。

@ViewChild('fading-cube') fadingCubeInput: any;

fadecube(){    

this.renderer.setProperty(this.fadingCubeInput.nativeElement,'emit',"fade")
}

Answer 1

要使用 @ViewChild() 访问您的元素，您可以为其分配一个 template reference variable：

<a-entity #fadingCube ... >

然后您可以在代码中使用该模板变量名：

@ViewChild('fadingCube') fadingCubeInput: ElementRef;

您应该能够在将 HTMLElement 转换为 any:

后调用 emit('fade')

(this.fadingCubeInput.nativeElement as any).emit('fade');

Javascript 到 Angular 2 : document.querySelector('el').emit('em') 到 @viewChild

Javascript to Angular 2 : document.querySelector('el').emit('em') to @viewChild

aframe

viewchild

angular2-render

angular