省略号指令

学习如何使用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: