clientWidth 在角度 9+ 上始终返回零

Question

您好，我想从图像中获取宽度和高度，但 clientWidth 总是返回零，这是我的指令

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[image-fit]'
})
export class ImageFitDirective {

  constructor(
    private _elementRef: ElementRef
  ) {
  }

  ngAfterViewInit(): void {
    this._fit();

  }

  private _fit(): void {
    let width: any = this._elementRef.nativeElement.clientWidth;
    let height: any = this._elementRef.nativeElement.clientHeight;

    // console.log(this._elementRef);
    console.log(width, height);

  }

}

Answer 1

你可以试试这样使用吗？

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[image-fit]',  
  host: {
    '(click)':"_fit()"
  }
})
export class ImageFitDirective {

  constructor(
    private _elementRef: ElementRef
  ) { }

  ngAfterViewInit(): void {
    this._fit()
  }

  _fit(): void {
    const width = this._elementRef.nativeElement.offsetWidth;
    const height = this._elementRef.nativeElement.offsetHeight;
    console.log('width', width)
    console.log('height', height) 
  }

}

Answer 2

来自docs in developer.mozilla

对于内联元素，Element.clientWidth 属性为零，并且 没有 CSS 的元素；否则，它是元素的内部宽度 像素。它包括填充，但不包括边框、边距和 垂直滚动条（如果存在）。

你可以使用 getBoundingClientRect()

private _fit(): void {
    const  rect=this._elementRef.nativeElement.getBoundingClientRect()
    let width: any = rect.width;
    let height: any = rect.height;

    console.log(width, height);

  }

顺便说一句，如果你想应用到 img，你应该使用事件 load 否则给出值 0 除非图像被浏览器“缓存”

<img [src]="'https://picsum.photos/200/300?random=1'" 
     (load)="onLoad($event.target)" >

onLoad(img:any)
{
   console.log(img.clientWidth,img.getBoundingClientRect())
}

更新一如既往，如果我们在一个带有 *ngIf 之类的 div 下有一些，例如

<div *ngIf="condicion">
  ..what ever...
</div>

我们做不到

//this NOT WORK
condition=true;
myImageFitDirective._fit()

因为当我们调用函数_fit() 时，Angular 没有“重绘”。我们需要用 setTimeout 括起来

//now is OK
condition=true;
setTimeout(()=>{
   myImageFitDirective._fit()
})