2017-01-10 35 views
4

我想在angular2 + typescript中编写一个指令,使工具提示仅在省略号处于活动状态时才显示(仅在未完全显示时才显示完整文本,并以“...”结尾)。 我发现这个答案在计算器:从DOM元素中获取文本并将其插入'标题'打字稿

show the tooltip only when ellipsis is active

现在我想要把这种jQuery函数:

要打字稿。到目前为止,这是我得到:

import { Directive, ElementRef } from '@angular/core'; 

@Directive({ selector: '[isEllipsisActive]' }) 

export class IsEllipsisActiveDirective { 
constructor(el: ElementRef) { 
    if (el.nativeElement.classList.contains('className')) { 
     if (this.isEllipsisActive(el.nativeElement)) { 
      //el.nativeElement.attributes("title",el.nativeElement.text()); 
     } 
    } 
} 
isEllipsisActive(e: any) { 
return (e.offsetWidth < e.scrollWidth); 
    } 
} 

我无法弄清楚如何从元素中的文本,并使用打字稿传递给该元素的标题。 有什么想法?

谢谢!

回答

0

根据Angular2 doc,似乎使用ElementRef进行直接DOM访问并不安全。 您可以使用渲染器ElementRef获取/设置一个DOM值是这样的:

import {Renderer, ElementRef} from '@angular/core; 
... 
export class IsEllipsisActiveDirective { 
constructor { 
    private _renderer: Renderer, 
    private _el: ElementRef 
} (
    //get value 
    this._el.nativeElement.querySelector('div/p/whatever...') 
    //set value 
    this._renderer(_el.nativeElement.querySelector(tag), 'innerHTML', 'Foo') 
) 

希望这有助于。幸得这些堆栈溢出的答案: