Question

我是AngularJS的新手。我试图将一个微调器作为所有图像的背景。有几个图像，所以我不能在ts文件中使用单个变量isLoaded。

我在模板中使用它：

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

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

Answer 1

<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'" />

Answer 2

在学习指令后，我按如下方式做了：

import {Directive, ElementRef, Input, HostListener, Renderer} from '@angular/core';

@Directive({selector: '[myLoading]'})
export class ImageLoadingDirective
{
    constructor(private el: ElementRef,
                private renderer: Renderer)
    {
    }

    @HostListener('load') onLoad()
    {
        this.renderer.setElementClass(this.el.nativeElement, 'loading', false);
    }

    @HostListener('error') onError()
    {
        this.renderer.setElementClass(this.el.nativeElement, 'errLoading', false);
    }
}

然后，您只需将myLoading作为属性添加到任何图像。当然，您应该在CSS中定义loading和error类，并且还应该将此指令添加到模块声明部分。

对不起，这个“框架”在很多方面都很糟糕。除了键入的语言和反应式编程之外，我没有看到任何优点。

PS。我不明白的是，函数名onLoad和onError似乎是任意的。我没有在任何地方给他们打电话，我可以为他们选择任何名字，但他们仍然有效。不知道有什么意义。

AngularJS 2如何访问TS文件中的DOM元素？

2 个答案: