我有以下模板与“dotdotdot”css类正确地在溢出上添加省略号。
<div class="dotdotdot">{{data.trip.name}}</div>
我在这里要做的是实现一个指令,当仅激活省略号时添加工具提示。
以下是该指令的当前代码:
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);
}
}
我在上面的代码中有两个问题:
谢谢!
您可以创建此指令:
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
ofir的很好的答案 - 这是一个修改后的版本,如果文本在初始化后发生变化,它将起作用。
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[isEllipsisActive]'
})
export class isEllipsisActiveDirective {
constructor(private elementRef: ElementRef) {}
@HostListener('mouseenter')
onMouseEnter(): void {
setTimeout(() => {
const element = this.elementRef.nativeElement;
if (element.offsetWidth < element.scrollWidth) {
element.title = element.textContent;
}
else if (element.title) element.removeAttribute('title');
}, 500);
}
}