Angular Труба для отображения всплывающей подсказки, когда текст не полностью виден

Question

Я хочу отобразить всплывающую подсказку, если текст отображается не полностью в виде.

Я попробовал два метода

1. Я написал функцию для вычисления scrollWidth & clientWidth и условно показать подсказку. [Работает хорошо].
2. Я написал аналогичные логи c в трубе (не работает)

<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

Если кто-нибудь знает лучший способ показать подсказку, только когда текст не полностью виден, любезно комментарий.

Answer 1

Независимо от того, является ли это лучшей практикой. Причина, по которой ваша труба не работает, заключается в том, что определенный внутри метод не является «чистым». Это означает, что один и тот же вход в канал не будет давать тот же результат, потому что это зависит от внешнего объекта. В этом случае объект окна.

Это можно исправить с помощью pure: false:

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

stack

Однако это может быть Для этого лучше создать отдельный компонент или директиву, чтобы вы могли прослушивать изменение размера окна для пересчета. Нечистый канал - это обычно проблема производительности

Answer 2

Вы можете сделать это с помощью css. Просто создайте класс css, как показано ниже, и он сделает то же самое.

.text-limit-10rem{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 3

Вы можете сделать следующее:

slice-with-tooltip.component.ts

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
    selector: 'slice-with-tooltip',
    templateUrl: './slice-with-tooltip.component.html',
    styleUrls: ['./slice-with-tooltip.component.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SliceWithTooltipComponent {
    @Input() text: string;
    @Input() limit: number = 20;
}

slice-with-tooltip.component. html

<div>
    <span>{{ text | slice: 0:limit }}</span>
    <span class="show-more" *ngIf="text && text.length > limit" [pTooltip]="text">
        ...
    </span>

</div>