Angular - 加载图像 src 后的自定义指令

Question

我有一个问题。

使用指令 [src] 加载后，我必须获取图像的宽度和高度。

我得到了这个 html，它使用 @input 从父对象获取他的 url：

<img fitImageSize [src]="content.openGraphImage.contentUrl"/>

这里是我获取尺寸的指令：

从 '@angular/core' 导入 { Directive, ElementRef, AfterContentInit };

@Directive({
  selector: '[fitImageSize]'
})
export class FitImageSizeDirective implements AfterContentInit {

  el: ElementRef
  private imgWidth: any;
  private imgHeight: any;

  constructor(_el:ElementRef) {
    this.el = _el;
  }

  ngAfterContentInit() {
    this.imgWidth = this.el.nativeElement.offsetWidth;
    this.imgHeight = this.el.nativeElement.offsetHeight;    
    console.log(this.imgWidth);
  }
}

console.log 总是打印“0”。我不知道如何在加载图像后启动指令过程。有人能帮助我吗？我在问之前搜索过，但我还没有找到任何答案。

谢谢！ :-)

Answer 1

您需要使用不同的生命周期挂钩来获取图像宽度。在组件视图完全初始化后调用。

@Directive({
  selector: '[fitImageSize]'
})
export class FitImageSizeDirective implements AfterViewInit {

  el: ElementRef
  private imgWidth: any;
  private imgHeight: any;

  constructor(_el:ElementRef) {
    this.el = _el;
  }

  ngAfterViewInit() {
    this.imgWidth = this.el.nativeElement.offsetWidth;
    this.imgHeight = this.el.nativeElement.offsetHeight;    
    console.log(this.imgWidth);
  }
}