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

【问题标题】：How to activate tooltip when ellipsis is activated using a directive in angular 5?使用角度 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 更改时不再需要，也会清除标题。

标签： jquery angular angular-directive

【解决方案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>

【讨论】：