布莱恩F爱
向一位来自波特兰的专注于Ayobet英雄联盟ngular、Web技术和Node.js的谷歌开发专家学习。
广告 ·ultimatecourses.com
用终极课程正确地学习Angular

省略号指令

学习如何使用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{返回elementRefnativeElement;}/**原始的内文;* /私人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 ()生命周期方法。视图初始化后,可以根据元素的文本截断文本scrollHeightclientHeight值。我们会在下面的截断方法。
  • 我们将调用截断()方法在初始化视图后以及浏览器窗口调整大小后都可以。
  • 使用HostListener ()我们可以监听调整事件在全局窗口对象上发生,然后根据需要截断文本。如果元素的宽度不是固定的,这一点尤其重要。
  • 最后,在截断()方法首先验证我们是在浏览器的上下文中执行的。然后,存储的初始值innerText属性,这样如果我们以后需要根据正在调整大小的窗口截断文本,我们就可以这样做。然后通过比较元素的值来截断文本并添加省略号scrollHeightclientHeight。我们将继续删除单词,直到内容符合元素的指定高度为止。

演示

看看下面的stackblitz和一个例子EllipsisDirective:

布莱恩F爱

嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。