时间戳

首页 > 解决方案 > Angular Pipe 在文本不完全可见时显示工具提示

angular - Angular Pipe 在文本不完全可见时显示工具提示

问题描述

如果文本未完全显示在视图中，我想显示工具提示。

我尝试了两种方法

  1. 我写了一个函数来计算 scrollWidth 和 clientWidth 并有条件地显示工具提示。[运作良好]。
  2. 我在管道中写了类似的逻辑（不工作）
<br><br><br><br>

<!-- It is working well with function getToolTip -->
<div class="text-limit-10rem" #firstDiv [ngbTooltip]="getToolTip(longMessage, firstDiv)">
  {{longMessage}}
</div>

<br><br><br>

<div class="text-limit-10rem" #secondDiv [ngbTooltip]="getToolTip(shortMessage, secondDiv)">
  {{shortMessage}}
</div>

<br><br><br>

<!-- It's not working when I'm using pipe -->
<div class="text-limit-10rem color-red" #thirdDiv [ngbTooltip]="longMessage | widthPipe: thirdDiv">
  {{longMessage}}
</div>

<br><br><br>

<div class="text-limit-10rem color-red" #forthDiv [ngbTooltip]="shortMessage | widthPipe: forthDiv">
  {{shortMessage}}
</div>

  getToolTip(strVal, element: Element){
    if(element.scrollWidth > element.clientWidth){
      console.log('From Method: Scroll Width ', element.scrollWidth, ' Client Width ',element.clientWidth);
      return strVal;
    }
    else {
      return ''
    };
  }

管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'widthPipe'
})
export class WidthPipe implements PipeTransform {
  transform(strVal: string, elem: Element): string {
    console.log('From Pipe Scroll Width ', elem.scrollWidth, ' Client Width ',elem.clientWidth);
    if (elem.scrollWidth > elem.clientWidth) {
      return strVal && strVal.trim().length > 0 ? strVal : '';
    } else {
      return '';
    }
  }
}


.text-limit-10rem {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10rem;
    background-color: YELLOW;
}

在此处输入图像描述

StackBlitz 链接

如果有人知道仅在文本不完全可见时显示工具提示的更好方法，请发表评论。

标签： angular

解决方案

不管它是否是最佳实践。您的管道无法正常工作的原因是因为内部定义的方法不是“纯”的。这意味着，管道中的相同输入不会产生相同的输出，因为它依赖于外部对象。本例中的窗口对象。

您可以使用以下方法解决此问题pure: false：

@Pipe({
  name: 'widthPipe',
  pure: false
})
export class WidthPipe implements PipeTransform {
  //...
}

堆

但是，最好为此创建一个单独的组件或指令，以便您可以监听窗口调整大小以重新计算。不纯的管道通常是性能问题

推荐阅读