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挂钩中呈现，并且我无法想到一种从另一个挂钩/方法获取宽度的方法。

由于我的元素ion-text不会触发任何事件，因此我也无法使用HostListener来初始化元素后获得宽度。

您有什么建议吗？

谢谢！

编辑

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

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

Answer 1

此问题可能是由于获取元素的宽度时未初始化视图而引起的。您需要在这里使用指令的另一个生命周期挂钩。 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

希望获得帮助。

属性指令：初始化时获取ElementRef宽度

1 个答案: