指令hoslistener到带有加载事件的图像标签-angular4

Question

I'm trying to get a directive using hostlistener to detect when images are completed loaded with angular4

    <img imgDirective src="124.jpg">

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

Then if the load is complete I output the value using an EventEmitter, however, the hostlistener event seems not working at all. Does any one knows why?if I a change the event on the hostlistener as below? the event works, but not for image tag. Do you know if this is possible?

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

I got the event form https://developer.mozilla.org/en-US/docs/Web/Events

What events can we use in angular4? is a limited list?

Answer 1

I would do it this way:

@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;
  }
}

and use it like

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