使用角度5中的指令激活省略号时，如何激活工具提示? [英] How to activate tooltip when ellipsis is activated using a directive in angular 5?

问题描述

我有一个带有"dotdotdot" css类的以下模板，该模板添加 正确地出现省略号.

I have the following template with a "dotdotdot" css class which add ellipsis on overflow correctly.

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

我在这里要做的是实现一个指令，该指令在以下情况时添加工具提示 省略号仅被激活.

What I'm trying to do here is to implement a directive which add a tooltip when the ellipsis is activated only.

这是指令中的当前代码:

Here is the current code from the directive:

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);
}

}

我在上面的代码中有两个问题:

I have two problems in the code above:

1. isEllipsisActive无法正常工作，我需要识别椭圆的方法.
2. 我需要知道如何动态添加title或[title]属性 来自$(this.el).该值是来自div的文本.

1. isEllipsisActive is not working, I need the way to identified the ellipsis.
2. I need to know how to add title or [title] attribute dynamically from $(this.el). The value is the text from the div.

谢谢！

推荐答案

您可以创建以下指令:

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

这篇关于使用角度5中的指令激活省略号时，如何激活工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！