javascript - 从 DOM 元素获取文本并将其插入到 'title' typescript

Question

我正在尝试用 angular2 + typescript 编写一个指令，使工具提示仅在省略号处于事件状态时显示(显示完整文本仅在未完全显示时弹出，并以 "..."结尾)。我在 stackoverflow 中找到了这个答案:

show the tooltip only when ellipsis is active

现在我正在尝试翻译这个 Jquery 函数:

typescript 。到目前为止，这是我得到的:

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 似乎并不安全.您可以使用带有 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 答案:

• How do you access the element HTML from within an Angular2 attribute directive
• get hold of an element in the template