省号指令

使用Angular指令学习如何轻松截断并将省略性截断并将省略性截断。

目标

我们省略号指令的目标是：

• 可以应用于具有指定固定高度的元素的简单属性指令。
• 避免溢出超出指定固定高度的文本内容。
• 如果文本溢出，请删除必要的文本并将省略号附加，直到文本适合在指定的高度内。

Elementref.

我们需要理解的第一个概念是Angular的Elementref.使用属性指令时的实例。我们可以通过我们的属性指令中的依赖项注入访问此功能构造函数（）功能。

这母语财产Elementref.类实例使我们能够在浏览器的上下文中访问本机文档对象模型（DOM）元素。一旦我们访问元素，我们就可以确定元素是否是滚动属性值超出元素的ClientHeight.适当的价值。

平台特定于平台

值得注意的是，我们在此实现的策略将是特定于平台的。为了澄清，Angular不仅仅是在浏览器上下文中构建单页应用程序的框架。相反，Angular可用于构建应用程序任何背景信息，但最常用于浏览器的上下文，Node.js，用于构建桌面应用程序的电子，以及用于构建混合移动应用的NativeScript或Ionic。

总之，我们将使用isplatformbrowser（）可用的功能@ Angular / Common用于验证应用程序的模块确实在浏览器的上下文中执行。

这省略号

以下是Angular属性指令的完整源代码：

@指示（{选择器：'[appellipsis]'}）出口班级省略号实施afterviewInit.{/ **本机HTMLElement。* /私人的得到el（）：htmlelement.{返回这。Elementref.。母语;}/ **原始的内容;* /私人的innertext.：细绳;构造函数（私人的Readonly Elementref.：Elementref.那@注入（platform_id.）私人的Readonly Platformid）{}上市ngafterviewinit.（）：空白{这。截短（）;}@HostListener.（'窗口：调整大小'）私人的onwindowresize.（）{这。截短（）;}私人的截短（）：空白{//验证执行上下文是浏览器平台如果（！！isplatformbrowser.（这。平实践））{返回;}//存储原始的innertext如果（这。innertext.===.不明确的）{这。innertext.=这。el。innertext.。修剪（）;}//重置Innertext这。el。innertext.=这。innertext.;//截断文本并附加省略号const文本=这。innertext.。分裂（''）;尽管（文本。长度>0.&&这。el。滚动>这。el。ClientHeight.）{文本。流行音乐（）;这。el。innertext.=`$ {文本。加入（''）}......`;}}}

让我们潜入其中的实施省略号：

• 首先，我们有一个方便的人el用于访问的属性访问器母语注入的财产Elementref.类实例。请注意，返回类型为泛型htmlelement.。这是必要的，所以我们有IntelliSense并在访问时键入检查innertext.元素的财产。
• 接下来，这是innertext.类属性很简单细绳在其中，我们将在应用属性指令的元素中存储原始文本。
• 在里面构造函数（）我们注射了两种功能Elementref.类实例以及平实践使用platform_id.注射令牌。
• 该指令实现了afterviewInit.生命周期界面和它相关联ngafterviewinit（）生命周期方法。初始化视图后，我们可以根据元素的截断截断文本滚动和ClientHeight.价值观。我们将在下面看到这个截短方法。
• 我们会援引这件事截短（）在初始化视图之后的方法以及浏览器窗口已调整大小之后。
• 使用hostlistener（）装饰者我们可以倾听调整大小在全局窗口对象上发生事件，然后根据需要截断文本。如果元素的宽度未固定，这尤其重要。
• 最后，在里面截短（）方法将首先验证我们在浏览器的上下文中执行。然后，我们将存储初始值innertext.属性，因此如果我们需要基于被调整大小的窗口稍后需要截断文本，我们可以这样做。然后，我们通过比较元素的值来截断文本并追加省略号滚动到了ClientHeight.。我们将继续删除单词，直到内容适合元素的指定高度。

演示

用一个例子查看以下StackBlitz省略号：