angular - 属性指令 : Get an ElementRef width upon initialization

Question

我无法在属性指令中获取 ElementRef 的宽度，因为它始终等于 0

我定义属性指令的元素是:

<ion-text myCustomDirective>Test Text</ion-text>

指令的实现是这样的:

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

@Directive({
  selector: '[myCustomDirective]'
})
export class MyCustomDirective implements OnInit {

  private element: any;

  constructor(
    private elementRef: ElementRef
  ) { }

  ngOnInit() {
    this.element = this.elementRef.nativeElement;
    console.log("Element width: " + this.element.offsetWidth) //The width here is always equal to 0
  }
}

我尝试了不同的方法和属性，例如 clientWidth、getComputedStyle(this.element)['width']，但我总是得到 0.

我认为问题在于该元素尚未在 onInit Hook 中呈现，我想不出从另一个 Hook /方法获取宽度的方法。

因为我的元素 ion-text 没有触发任何事件，所以我无法使用 HostListener 来获取元素初始化后的宽度。

你有什么建议吗？

谢谢!

编辑

即使尝试使用 ngAfterViewInit() 钩子(Hook)也会返回 0 的宽度:

ngAfterViewInit(): void {
  console.log("Element width: " + this.elementRef.nativeElement.offsetWidth); // returns 0
}

Answer 1

此问题可能是由于在获取元素宽度时未初始化 View 而引起的。你在这里需要的是使用指令的另一个生命周期钩子(Hook)。 ngAfterViewInit()

这是解决方案

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

@Directive({
  selector: '[myCustomDirective]'
})
export class MyCustomDirective implements OnInit, AfterViewInit {

  private element: any;

  constructor(
    private elementRef: ElementRef
  ) { }

  ngOnInit() {}

  ngAfterViewInit() {
    this.element = this.elementRef.nativeElement;
    console.log("Element width: " + this.element.offsetWidth) //The width here is always equal to 0
  }
}

Here is solution on stackblitz

希望这对您有所帮助。