Question

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

    <img imgDirective src="124.jpg">

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

然后，如果加载完成，我使用EventEmitter输出值，但是，hostlistener事件似乎根本不起作用。有没有人知道为什么？如果我在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">

指令hoslistener使用load事件来映像标记 - angular4

1 个答案: