AngularJS 2如何访问TS文件中的DOM元素? [英] AngularJS 2 how to access DOM element within TS file?

问题描述

我是AngularJS的新手.我正在尝试将微调框用作所有图像的背景.有几张图片，所以我不能在ts文件中使用单个变量isLoaded.

I am new to AngularJS. I am trying to put a spinner as a background to all images. There are several images, so I cannot use a single variable isLoaded inside the ts file.

我在模板中使用它:

<img src="{{document.thumbUrl}}" class="spinner" (load)="loaded()" />

然后在ts文件中的函数loaded()中，如何访问触发事件的元素?以及如何删除触发事件的特定元素上的类spinner?

Then in the function loaded() inside the ts file, how can I access the element that triggered the event? And how can I remove the class spinner on that particular element which triggered the event?

推荐答案

<img src="{{document.thumbUrl}}" class="spinner" (load)="loaded($event)" />

课堂内

constructor(private renderer:Renderer){


}

loaded($event){

  console.log($event.target); // is the img
   this.renderer.setElementClass($event.target, '', false);
}

也许更聪明:

<img #image src="{{document.thumbUrl}}" [class.spinner]="!image.loaded" (load)="image.loaded='true'" />

这篇关于AngularJS 2如何访问TS文件中的DOM元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！