使用角度 5 中的指令激活省略号时如何激活工具提示？

Posted 2023-02-22

【中文标题】使用角度 5 中的指令激活省略号时如何激活工具提示？

【英文标题】：How to activate tooltip when ellipsis is activated using a directive in angular 5?

【发布时间】：2019-02-28 00:40:17

【问题描述】：

我有以下带有“dotdotdot”css 类的模板，它添加 省略号溢出正确。

<div class="dotdotdot">data.trip.name</div>

我在这里要做的是实现一个指令，该指令在 省略号仅被激活。

这是指令中的当前代码：

import  Directive, OnInit, ElementRef  from '@angular/core';

declare var $: any;

@Directive(
  selector: '.dotdotdot'
)
export class DotdotdotDirective implements OnInit 

  private el: htmlElement;
  constructor(elRef: ElementRef) 
    this.el = elRef.nativeElement;


ngOnInit()            
         if (this.isEllipsisActive(this.el))    
            // TODO add title attribute to the div with value from text         
            $(this.el).tooltip();     
                  


isEllipsisActive(e) 
     return (e.offsetWidth < e.scrollWidth);

我上面的代码有两个问题：

isEllipsisActive 不起作用，我需要识别省略号的方法。 我需要知道如何动态添加title或[title]属性 来自 $(this.el)。该值是 div 中的文本。

谢谢！

【问题讨论】：

HTML text-overflow ellipsis detection的可能重复

它可以在没有 jQuery 的情况下工作。见this stackblitz。

可以在here 找到更可靠的答案。它适用于ngAfterViewChecked，因此不需要setTimeout + 如果在innerText 更改时不再需要，也会清除标题。

【参考方案1】：

你可以创建这个指令：

import  AfterViewInit, Directive, ElementRef, EventEmitter, Output  from 

'@angular/core';

@Directive(
  selector: '[isEllipsisActive]'
)
export class IsEllipsisActiveDirective implements AfterViewInit 

  constructor(private elementRef: ElementRef) 

  ngAfterViewInit(): void 
    setTimeout(() => 
      const element = this.elementRef.nativeElement;
      if(element.offsetWidth < element.scrollWidth)
        element.title = element.innerHTML;
      
    , 500);
  

看看这个https://stackblitz.com/edit/angular-qjmg7m?file=src%2Fapp%2Fis-ellipsis-active.directive.ts

【讨论】：

这适用于移动设备还是我必须以其他方式实现？

【参考方案2】：

ofir 的好答案 - 这是一个修改后的版本，如果初始化后文本发生更改，它将起作用。

import  Directive, ElementRef, HostListener  from '@angular/core';

@Directive(
  selector: '[isEllipsisActive]'
)

export class isEllipsisActiveDirective 

  constructor(private elementRef: ElementRef) 

  @HostListener('mouseenter')
  onMouseEnter(): void 
    setTimeout(() => 
      const element = this.elementRef.nativeElement;
      if (element.offsetWidth < element.scrollWidth) 
        element.title = element.textContent;
      
      else if (element.title) element.removeAttribute('title'); 
    , 500);
  

【讨论】：

setTimeout 不是必需的，但这是个好主意。帮了我很多忙。

【参考方案3】：

您可以使用 disableTooltip 属性，并在是否禁用时返回一个函数。

https://stackblitz.com/edit/sample-smart-tooltip

【参考方案4】：

  isEllipsisActive(e: HTMLElement): boolean 
    return e ? (e.offsetWidth < e.scrollWidth) : false;
  

<mat-card>
    <mat-card-title #galleryTitle [matTooltip]="gallery.name"
        [matTooltipDisabled]="!isEllipsisActive(galleryTitle)">
        gallery.name
    </mat-card-title>
<mat-card>