Директива атрибута: получить ширину ElementRef при инициализации - PullRequest
Новая
       45

Директива атрибута: получить ширину ElementRef при инициализации

0 голосов
/ 25 февраля 2019

Я не могу получить ширину 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
}

1 Ответ

0 голосов
/ 25 февраля 2019

Эта проблема может возникнуть из-за того, что представление не инициализируется во время получения ширины элемента.то, что вам нужно здесь, это использовать другой хук жизненного цикла директивы. 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
  }
}

Вот решение наstackblitz

Надеюсь, эта помощь.

...