使用 angular 5 中的指令激活省略号时如何激活工具提示? [英] How to activate tooltip when ellipsis is activated using a directive in angular 5?
本文介绍了使用 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
我在上面的代码中有两个问题:
- isEllipsisActive 不起作用,我需要识别省略号的方法.
- 我需要知道如何动态添加标题或 [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:
- isEllipsisActive is not working, I need the way to identified the ellipsis.
- 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屋!
查看全文