Angular 4实现左侧递归HTML列表树鼠标悬停展开长文本功能

嘿，我正好处理过类似的需求，给你一套实用的方案，完美匹配你要的悬停显示长文本效果！

核心思路 #

我们要实现两个关键效果：

1. 长文本默认被容器截断，显示省略号
2. 鼠标悬停时，完整文本在右侧弹出阴影框（和资源管理器逻辑一致）

第一步：基础CSS实现截断与Tooltip #

先搞定样式部分，这是核心。我们给树形节点的文本容器加专属类，配合伪元素实现tooltip：

/* 全局样式或组件内用::ng-deep穿透样式隔离 */
::ng-deep .tree-node-text {
  position: relative;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 8px;
  cursor: default;
}

/* 悬停时显示右侧tooltip */
::ng-deep .tree-node-text:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px); /* 显示在容器右侧，留间距 */
  top: 0;
  background-color: #2d2d2d;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  white-space: pre-wrap; /* 支持换行，避免tooltip过长 */
  max-width: 350px; /* 限制tooltip最大宽度 */
  z-index: 9999;
}

/* 可选：给截断文本加渐变提示，告诉用户有内容被隐藏 */
::ng-deep .tree-node-text::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 100%;
  background: linear-gradient(to right, transparent, #fff);
  pointer-events: none;
}

第二步：Angular递归组件中应用样式 #

假设你已经有了递归的树形节点组件（比如TreeItemComponent），在模板里给文本容器绑定tooltip内容：

<!-- tree-item.component.html -->
<div class="tree-item">
  <!-- 文本容器：把节点文本绑定到data-tooltip属性 -->
  <div class="tree-node-text" [attr.data-tooltip]="item.label">
    {{ item.label }}
  </div>

  <!-- 递归渲染子节点 -->
  <div *ngIf="item.children && item.children.length" class="tree-children">
    <app-tree-item *ngFor="let child of item.children" [item]="child"></app-tree-item>
  </div>
</div>

第三步：优化（可选）：仅文本超出时显示Tooltip #

上面的方案会给所有节点都加tooltip，哪怕文本没截断。如果想更精准，我们可以写个Angular指令判断文本是否超出：

// text-overflow.directive.ts
import { Directive, ElementRef, HostBinding, OnInit } from '@angular/core';

@Directive({
  selector: '[appTextOverflowCheck]'
})
export class TextOverflowCheckDirective implements OnInit {
  @HostBinding('class.has-overflow') hasOverflow = false;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.checkOverflow();
    // 监听窗口 resize，避免容器大小变化后判断失效
    window.addEventListener('resize', () => this.checkOverflow());
  }

  private checkOverflow() {
    const elem = this.el.nativeElement;
    this.hasOverflow = elem.scrollWidth > elem.clientWidth;
  }
}

然后修改模板和CSS：

<div class="tree-node-text" 
     [attr.data-tooltip]="item.label"
     appTextOverflowCheck>
  {{ item.label }}
</div>

/* 只有文本超出时才显示tooltip */
::ng-deep .tree-node-text.has-overflow:hover::before {
  content: attr(data-tooltip);
  /* 保留之前的tooltip样式 */
}

注意事项 #

1. 如果你用了Angular的样式隔离，记得用::ng-deep让样式穿透到递归的子组件，或者把样式放到全局styles.css里
2. 可以根据自己的UI风格调整tooltip的背景色、阴影、间距等参数
3. 若树形节点有展开/折叠动画，确保tooltip的z-index足够高，不会被其他元素遮挡

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