使用加载事件指示主机侦听器到图像标签 - 角度 4答案

【问题标题】：directive hoslistener to image tag with load event - angular4使用加载事件指示主机侦听器到图像标签 - 角度 4
【发布时间】：2017-11-22 13:58:15
【问题描述】：

我正在尝试使用 hostlistener 获取指令来检测图像何时完成加载 angular4

    <img imgDirective src="124.jpg">

    @HostListener('load', ['$event.target']) 
    public onLoad(event) {
        this.img = false;
    }

然后，如果加载完成，我会使用 EventEmitter 输出值，但是，hostlistener 事件似乎根本不起作用。有谁知道为什么？如果我改变主机监听器的事件如下？该事件有效，但不适用于图像标签。你知道这是否可能吗？

    @HostListener('window:load', ['$event.target']) 
    public onLoad(event) {
        this.img = false;
    }

我收到了活动表格https://developer.mozilla.org/en-US/docs/Web/Events

我们可以在 angular4 中使用哪些事件？是有限的列表吗？

【问题讨论】：

使用@Inputs() 和@Outputs。插入新图像发射加载=真图像加载完成发射加载假。当图像加载完成时，您还可以使用 HostBinding 来更改 src。
我尝试了这种方法，只适用于第一次，不适用于动态图像，似乎指令没有更新值
请提供您的代码。

标签： angular

【解决方案1】：

我会这样做：

@Directive({
  selector: '[imgDirective]',
})
class ImgDirective {
  @Input() imgDirective:string;

  constructor(private element:ElementRef){
    element.nativeElement.src = 'resources/spinner.png';
  } 

  @HostListener('load', ['$event'])
  onLoad() {
    this.element.nativeElement.src = this.imgDirective;
  }
}

并像使用它

<img [imgDirective]="124.jpg">

【讨论】：

对这个问题完全没有帮助，但我对你的方法很感兴趣。我对此有一个问题：是否可以在加载图片时设置图片的宽度和高度，并将微调器在此容器中居中？
请提供更多信息，您实际上要解决什么问题。当然，您可以设置图像元素的任何属性。
我不是要解决任何问题（而且我不是 OP），但你的回答让我很感兴趣，这是一个非常好的方法，类似于 imagesLoaded 所做的，我会我很想知道如何制作一个与图像大小相同的容器，并在图像加载时将微调器居中。就是这样！
我看到的唯一问题是你如何获得大小，以及在什么事件上，因为一旦加载图片就会调用 onload ！这实际上是我对你的第一个问题，而不是我问的问题，对不起
这个问题揭示了我的设计中的一个缺陷：-/ 实际上我会使用两个图像标签，将其包装在一个自定义图像组件中并使用*ngIf 来显示微调器或实际图像.当显示微调器时，无法等待实际图像的加载事件，因为这样浏览器就不会加载实际图像。