渲染后使用哪个 Angular 或 Ionic 生命周期钩子来获取元素的 offsetWidth

Question

我需要获取 <video> 元素的宽度，该元素当前的样式设置为父元素高度的 100%。这意味着我只能在浏览器渲染后才能获取宽度（或者至少我是这么认为的）。

我正在使用 IonViewDidEnter 生命周期挂钩，如下所示。问题是我有时得到正确的调光，有时我得到错误的调光。换句话说，随机重新加载会产生两组不同的结果，所以我猜我使用了错误的钩子。

这是我的组成部分 class

@ViewChild('video', { static: false }) private videoElRef: ElementRef;

ionViewDidEnter() {
  this.videoEl = this.videoElRef.nativeElement;
  this.videoWidth = this.videoEl.offsetWidth;
  this.videoHeight = this.videoEl.offsetHeight;
}

我应该使用哪个钩子或其他方法来保证我将在加载后获得 <video> 元素的宽度。

Answer 1

我找到了答案。在一般情况下，这不会回答标题问题，但它至少用 <video> 标签涵盖了我自己的案例。

我发现使用视频元素的 loadedmetadata 事件或 loadeddata 事件是获取 offsetwidth 和 offsetheight 的一种足够快的方法，而无需尝试提前访问它们.

渲染后使用哪个 Angular 或 Ionic 生命周期钩子来获取元素的 offsetWidth

Which Angular or Ionic lifecycle hook to use to get offsetWidth of element after it is rendered

angular

ionic4