指令hoslistener到帶有加載事件的圖像標簽-angular4

Question

我正在嘗試使用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中使用哪些事件？ 是一個有限的清單？

Answer 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">