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

问题描述

我有以下模板，其中添加了一个dotdotdot"css 类正确省略溢出.

{{data.trip.name}}

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

这是指令的当前代码:

import { Directive, OnInit, ElementRef } from '@angular/core';声明 var $: any;@指示({选择器:'.dotdotdot'})导出类 DotdotdotDirective 实现 OnInit {私人 el: HTMLElement;构造函数(elRef:ElementRef){this.el = elRef.nativeElement;}ngOnInit() {如果(this.isEllipsisActive(this.el)){//TODO 将标题属性添加到带有文本值的 div$(this.el).tooltip();}}isEllipsisActive(e) {return (e.offsetWidth 

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

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

谢谢！

解决方案

您可以创建此指令:

import { AfterViewInit, Directive, ElementRef, EventEmitter, Output } from'@角度/核心';@指示({选择器:'[isEllipsisActive]'})导出类 IsEllipsisActiveDirective 实现 AfterViewInit {构造函数(私有元素引用:元素引用){}ngAfterViewInit(): 无效 {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

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 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.

Thanks!

解决方案

You can create this directive:

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

take a look on this https://stackblitz.com/edit/angular-qjmg7m?file=src%2Fapp%2Fis-ellipsis-active.directive.ts

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