指令HOSSListener到带有加载事件的图像标记-angular4

我正在尝试使用hostlistener获取一个指令，以检测何时使用angular4加载完图像

@HostListener（'load'，['$event.target']））
公共加载（事件）{
this.img=false；
}

然后，如果加载完成，我将使用EventEmitter输出值，但是hostlistener事件似乎根本不起作用。有人知道为什么吗？如果我更改hostlistener上的事件，如下所示？事件有效，但不适用于图像标记。你知道这是否可行吗

@HostListener（'window:load'，['$event.target']））
公共加载（事件）{
this.img=false；
} 

我拿到了活动表

---

在angular4中我们可以使用哪些项目？是一个有限的列表吗？

我会这样做：

@指令({
选择器：“[imgDirective]”，
})
类ImgDirective{
@Input（）imgDirective:字符串；
构造函数（私有元素：ElementRef）{
element.nativeElement.src='resources/spinner.png'；
} 
@HostListener（'load'，['$event']））
onLoad（）{
this.element.nativeElement.src=this.imgDirective；
}
}

像这样使用它

使用@Inputs（）和@Outputs。插入新图像发射加载=真图像加载完成发射加载假。当图像加载完成时，您也可以使用HostBinding来更改src。我尝试了这种方法，只在第一次使用，不适用于动态图像，似乎指令没有更新值请提供您的代码。在这个问题上没有任何帮助，但我对您的方法感兴趣。我有一个问题：是否可以在图片加载时设置图片的宽度和高度，并将微调器放在这个容器中？请提供更多信息，说明您实际要解决的问题。当然你可以设置图像元素的任何属性。我不想解决任何问题（我也不是OP），但你的回答让我感兴趣，这是一个非常好的方法，类似于imagesLoaded所做的，我想知道如何在图像加载时制作一个与图像大小相同的容器，并将微调器置于其中。这就是全部！我看到的唯一问题是如何获得大小，以及在什么事件上，因为加载图片后会调用onload！这实际上是我向您提出的第一个问题，而不是我问的问题，很抱歉，这个问题揭示了我设计中的一个缺陷：-/实际上，我会使用两个图像标记，将其包装在自定义图像组件中，并使用

*ngIf

显示微调器或实际图像。当显示微调器时，无法等待实际图像的加载事件，因为这样浏览器就不必加载实际图像了。