Question

我正在尝试在angular2 + typescript中编写一个指令，使得工具提示仅在省略号处于活动状态时显示（仅在未完全显示时显示完整文本，并以“...”结尾）。我在stackoverflow中找到了这个答案：

"activeTab"

现在我正在尝试翻译这个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);
  }
}

我无法弄清楚如何从元素中获取文本并使用typescript将其传递给元素的标题。任何想法？

谢谢！

Answer 1

根据Angular2 doc，似乎使用ElementRef进行直接DOM访问并不安全。您可以使用Renderer和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')
)

希望这会有所帮助。归功于这些Stack Overflow答案：

从DOM元素中获取文本并将其插入“title”typescript

1 个答案: