OffsetWidth Angular's nativeElement равен 0

Question

Я попытался получить данные о смещении компонента в моем угловом приложении, как показано ниже.

this.el.nativeElement.offsetWidth

Но он возвращает 0, если я не передам его свойство css, как показано ниже.

this.renderer.setStyle(this.el.nativeElement, 'position', 'fixed');

это работает так, как я хочу. Возвращая реальную стоимость нативного компонента. Но Я не хочу менять свойство position.

Вы предлагаете мне какое-либо решение для получения текущих данных смещения, таких как offsetWidth и т. Д. Вы можете работать на здесь .

Answer 1

Это происходит потому, что компонент является встроенным элементом по умолчанию.Вы можете изменить его атрибут стиля display на block или inline-block, чтобы получить правильный размер в коде:

:host {
  display: block; /* or display: inline-block; */
}

См. этот стек для демонстрации.

Answer 2

Иногда элемент может не иметь ссылки на объект DOM.Попробуйте выполнить обнаружение изменений, чтобы обновить ссылку.Извините, я не могу комментировать.

импорт ChangeDetectorRef в конструкторе

constructor(private changeDetect: ChangeDetectorRef) {}

@ViewChild('splashScreen') el: ElementRef;

getOffSetWidth() {
    // run change detection
    this.changeDetect.detectChanges();
    // And then try getting the offset
    const offsetWidth = this.el.nativeElement.offsetWidth;
    return offsetWidth; 
}