如何在Angular 14指令中获取元素的字体大小

问题出在你过早获取样式了——在constructor里，指令关联的元素还没挂载到DOM树上，浏览器还没给它应用继承的样式，所以getComputedStyle拿不到有效值；而element.style.fontSize本来就只能读取元素的内联样式，继承的样式根本不会存在这里。

给你两种靠谱的解决方法：

方法一：使用AfterViewInit钩子 #

Angular的AfterViewInit生命周期钩子会在组件视图完全初始化（元素已挂载到DOM）后触发，这时候去获取计算样式就没问题了：

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

@Directive({
  selector: '[yourDirectiveName]'
})
export class YourDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    const element = this.el.nativeElement;
    const fs = window.getComputedStyle(element).getPropertyValue('font-size');
    console.log('最终字体大小:', fs); // 这里就能拿到正确值了
  }
}

方法二：处理动态加载的元素（如果需要） #

如果你的元素是后续动态添加到DOM的，AfterViewInit可能也抓不到，这时候可以用setTimeout延迟获取（简单粗暴但有效）：

constructor(private el: ElementRef) {
  setTimeout(() => {
    const element = this.el.nativeElement;
    const fs = window.getComputedStyle(element).getPropertyValue('font-size');
    console.log('最终字体大小:', fs);
  }, 0); // 0延迟会让代码放到下一轮事件循环，此时元素已挂载
}

注意：如果是复杂的异步渲染场景，可根据实际情况调整setTimeout的延迟时间。

内容的提问来源于stack exchange，提问作者LeoGmz