Angular中如何基于DOM元素offsetWidth动态绑定visibility属性？

解决方案 #

方法一：自定义指令（推荐，适配批量元素） #

自定义指令直接绑定到文本元素，内部监听自身和父元素的尺寸变化，自动控制visibility，还能联动进度条数值更新。

1. 创建指令：

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

@Directive({
  selector: '[axisTextVisibility]'
})
export class AxisTextVisibilityDirective implements OnInit, OnDestroy {
  private resizeObserver: ResizeObserver | null = null;
  // 可选：进度条数值变化时主动触发检查
  @Input() axisValue?: number;

  constructor(private el: ElementRef<HTMLElement>) {}

  ngOnInit(): void {
    const axisElement = this.el.nativeElement.parentElement;
    if (!axisElement) return;

    // 监听文本和父元素的尺寸变化
    this.resizeObserver = new ResizeObserver(() => {
      this.updateVisibility(axisElement);
    });
    this.resizeObserver.observe(this.el.nativeElement);
    this.resizeObserver.observe(axisElement);

    // 初始执行一次判断
    this.updateVisibility(axisElement);
  }

  ngOnDestroy(): void {
    this.resizeObserver?.disconnect();
  }

  // 进度条数值更新时，延迟触发判断（确保DOM已更新）
  @Input() set axisValue(value: number) {
    const axisElement = this.el.nativeElement.parentElement;
    if (axisElement) {
      setTimeout(() => this.updateVisibility(axisElement));
    }
  }

  private updateVisibility(axisElement: HTMLElement): void {
    const textWidth = this.el.nativeElement.offsetWidth;
    const axisWidth = axisElement.offsetWidth;
    this.el.nativeElement.style.visibility = textWidth > axisWidth ? 'hidden' : 'visible';
  }

  // 兼容不支持ResizeObserver的浏览器，额外监听窗口resize
  @HostListener('window:resize')
  onWindowResize(): void {
    const axisElement = this.el.nativeElement.parentElement;
    if (axisElement) {
      this.updateVisibility(axisElement);
    }
  }
}

2. 模板中使用：

<!-- 进度条父元素 -->
<div class="axis" [style.width]="(100 * item.value).toFixed(1) + '%'">
  <!-- 文本元素绑定指令，可选传入数值联动 -->
  <span axisTextVisibility [axisValue]="item.value">
    {{ (100 * item.value).toFixed(0) + '%' }}
  </span>
</div>

方法二：ViewChildren批量处理 #

如果不想用指令，可通过ViewChildren获取所有目标文本元素，批量监听尺寸变化：

import { Component, ViewChildren, QueryList, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-axis-container',
  template: `
    <div *ngFor="let item of axisItems" class="axis" [style.width]="(100 * item.value).toFixed(1) + '%'">
      <span class="axis-text">{{ (100 * item.value).toFixed(0) + '%' }}</span>
    </div>
  `
})
export class AxisContainerComponent implements OnInit, OnDestroy {
  axisItems = [/* 你的数据列表，比如 {name: 'axis1', value: 0.5} */];
  // 通过类选择器获取所有文本元素
  @ViewChildren('.axis-text', { read: ElementRef }) axisTexts!: QueryList<ElementRef<HTMLElement>>;
  private resizeObserver: ResizeObserver | null = null;

  ngOnInit(): void {
    this.resizeObserver = new ResizeObserver((entries) => {
      entries.forEach(entry => {
        const textElement = entry.target as HTMLElement;
        const axisElement = textElement.parentElement;
        if (axisElement) {
          const textWidth = textElement.offsetWidth;
          const axisWidth = axisElement.offsetWidth;
          textElement.style.visibility = textWidth > axisWidth ? 'hidden' : 'visible';
        }
      });
    });

    // 给每个文本元素和其父元素添加监听
    this.axisTexts.forEach(textEl => {
      const axisEl = textEl.nativeElement.parentElement;
      if (axisEl) {
        this.resizeObserver?.observe(textEl.nativeElement);
        this.resizeObserver?.observe(axisEl);
      }
    });
  }

  ngOnDestroy(): void {
    this.resizeObserver?.disconnect();
  }
}

注：Angular的ViewChildren支持类、标签、指令等CSS选择器，并非只能用特定机制。

方法三：组件化封装 #

把单个进度条+文本封装成独立组件，内部封装所有逻辑，适合复用场景：

1. 子组件代码：

import { Component, Input, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-axis-item',
  template: `
    <div class="axis" [style.width]="widthStyle">
      <span #textEl>{{ percentageText }}</span>
    </div>
  `
})
export class AxisItemComponent implements OnInit, OnDestroy {
  @Input() value!: number;
  widthStyle = '';
  percentageText = '';
  @ViewChild('textEl') textEl!: ElementRef<HTMLElement>;
  private resizeObserver: ResizeObserver | null = null;

  ngOnInit(): void {
    this.updateValue();
    const axisElement = this.textEl.nativeElement.parentElement;
    if (axisElement) {
      this.resizeObserver = new ResizeObserver(() => {
        this.updateVisibility(axisElement);
      });
      this.resizeObserver.observe(this.textEl.nativeElement);
      this.resizeObserver.observe(axisElement);
      this.updateVisibility(axisElement);
    }
  }

  // 数值变化时更新显示并重新判断visibility
  ngOnChanges(): void {
    this.updateValue();
    setTimeout(() => {
      const axisElement = this.textEl.nativeElement.parentElement;
      if (axisElement) this.updateVisibility(axisElement);
    });
  }

  ngOnDestroy(): void {
    this.resizeObserver?.disconnect();
  }

  private updateValue(): void {
    this.widthStyle = `${(100 * this.value).toFixed(1)}%`;
    this.percentageText = `${(100 * this.value).toFixed(0)}%`;
  }

  private updateVisibility(axisElement: HTMLElement): void {
    const textWidth = this.textEl.nativeElement.offsetWidth;
    const axisWidth = axisElement.offsetWidth;
    this.textEl.nativeElement.style.visibility = textWidth > axisWidth ? 'hidden' : 'visible';
  }
}

2. 父组件中使用：

<app-axis-item *ngFor="let item of axisItems" [value]="item.value"></app-axis-item>

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