mat-select中tooltipIfEllipsis指令始终禁用问题咨询

问题出在你的指令直接监听mat-select或mat-option的根元素，但实际显示文本并触发省略号的是它们内部的子元素。外层容器的scrollWidth和clientWidth判断无法反映内部文本的溢出状态，导致tooltip始终被禁用。

修改后的指令代码 #

import { Directive, ElementRef, HostListener } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

@Directive({
  selector: '[tooltipIfEllipsis]'
})
export class TooltipIfEllipsisDirective {

  constructor( 
    private matTooltip: MatTooltip,
    private elementRef: ElementRef<HTMLElement>) { }

  @HostListener('mouseenter')
  setTooltipState(): void {
    let targetElement: HTMLElement | null = null;

    // 定位mat-select内部的文本容器
    const matSelectText = this.elementRef.nativeElement.querySelector('.mat-select-text');
    if (matSelectText) {
      targetElement = matSelectText as HTMLElement;
    } 
    // 定位mat-option内部的文本容器
    else {
      const matOptionText = this.elementRef.nativeElement.querySelector('.mat-option-text');
      if (matOptionText) {
        targetElement = matOptionText as HTMLElement;
      }
    }

    // 根据目标元素的溢出状态控制tooltip
    if (targetElement) {
      const isOverflowed = targetElement.scrollWidth > targetElement.clientWidth || 
                           targetElement.scrollHeight > targetElement.clientHeight;
      this.matTooltip.disabled = !isOverflowed;
    } else {
      this.matTooltip.disabled = true;
    }
  }
}

关键调整说明 #

• 精准定位文本元素：通过querySelector找到Angular Material默认的文本容器类.mat-select-text（对应mat-select）和.mat-option-text（对应mat-option），这些才是实际应用省略号样式的元素。
• 修正判断逻辑：原逻辑的条件写反了，只有当文本容器的scrollWidth大于clientWidth（水平溢出）或scrollHeight大于clientHeight（垂直溢出）时，才需要启用tooltip，否则禁用。
• 兼容多场景：同时适配mat-select和mat-option的使用场景，让指令在两种组件上都能正常工作。

额外优化建议 #

• 如果自定义了mat-select或mat-option的样式，导致默认类名被修改，需要同步调整指令中的选择器。
• 可以添加窗口 resize 监听，在布局变化时重新判断tooltip状态：

  @HostListener('window:resize')
  onResize(): void {
    this.setTooltipState();
  }
  

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