省略号指令
学习如何使用Angular指令轻松地截断和添加省略号到内容。
目标
省略指令的目标是:
- 一个简单的属性指令,可以应用到具有指定固定高度的元素上。
- 避免文本内容溢出超过指定的固定高度。
- 如果文本溢出,请删除必要的文本并添加省略号,直到文本符合指定的高度。
ElementRef
我们需要理解的第一个概念是Angular的ElementRef
在使用attribute指令时实例化。我们可以通过属性指令的依赖注入来访问它构造函数()
函数。
的nativeElement
财产的ElementRef
类实例使我们能够在浏览器的上下文中访问本地文档对象模型(DOM)元素。一旦访问了元素,就可以确定该元素是否scrollHeight
属性值超过元素的值clientHeight
属性值。
特定于平台的
需要注意的是,我们将在这里实现的策略是特定于平台的。需要澄清的是,Angular不仅仅是一个在浏览器环境中构建单页应用程序的框架。相反,Angular可以用来构建应用任何上下文,但最常用于浏览器的上下文Node。电子用于构建桌面应用,而NativeScript或Ionic则用于构建混合移动应用。
总之,我们将使用isPlatformBrowser ()
函数中可用的@angular /常见模块,用于验证应用程序确实在浏览器的上下文中执行。
的EllipsisDirective
下面是Angular attribute指令的完整源代码:
@指令({选择器:“[appEllipsis]”})出口类EllipsisDirective实现了AfterViewInit{/**本地HTMLElement。* /私人得到埃尔():HTMLElement{返回这。elementRef。nativeElement;}/**原始的内文;* /私人innerText:字符串;构造函数(私人只读的elementRef:ElementRef,@注入(PLATFORM_ID)私人只读的platformId){}公共ngAfterViewInit():无效{这。截断();}@HostListener(“窗口:调整”)私人onWindowResize(){这。截断();}私人截断():无效{//验证执行上下文是浏览器平台如果(!isPlatformBrowser(这。platformId)){返回;}//保存原始的innerText如果(这。innerText= = =未定义的){这。innerText=这。埃尔。innerText。修剪();}//重置内部文本这。埃尔。innerText=这。innerText;//截断文本并添加省略号常量文本=这。innerText。分裂(' ');而(文本。长度>0& &这。埃尔。scrollHeight>这。埃尔。clientHeight){文本。流行();这。埃尔。innerText=”$ {文本。加入(' ')}…”;}}}
让我们深入了解的实现EllipsisDirective
:
- 首先,我们有一个handy
埃尔
属性访问器,用于访问nativeElement
注入的属性ElementRef
类实例。注意,这个的返回类型是泛型的HTMLElement
。这是必要的,所以我们有智能感知和类型检查时,访问innerText
元素的属性。 - 接下来,
innerText
类属性很简单字符串
其中,我们将在应用属性指令的元素中存储原始文本。 - 在
构造函数()
函数,我们同时注入ElementRef
类实例以及platformId
使用PLATFORM_ID
注入令牌。 - 该指令实现了
AfterViewInit
生命周期接口,它是相关联的ngAfterViewInit ()
生命周期方法。视图初始化后,可以根据元素的文本截断文本scrollHeight
和clientHeight
值。我们会在下面的截断
方法。 - 我们将调用
截断()
方法在初始化视图后以及浏览器窗口调整大小后都可以。 - 使用
HostListener ()
我们可以监听调整
事件在全局窗口对象上发生,然后根据需要截断文本。如果元素的宽度不是固定的,这一点尤其重要。 - 最后,在
截断()
方法首先验证我们是在浏览器的上下文中执行的。然后,存储的初始值innerText
属性,这样如果我们以后需要根据正在调整大小的窗口截断文本,我们就可以这样做。然后通过比较元素的值来截断文本并添加省略号scrollHeight
到clientHeight
。我们将继续删除单词,直到内容符合元素的指定高度为止。
演示
看看下面的stackblitz和一个例子EllipsisDirective
: