省略指令

了解如何使用Angular指令轻松截断内容并将其附加到内容中。

目标

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

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

ElementRef

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

这个本土元素土地上的财产ElementRef类实例使我们能够访问浏览器上下文中的本机文档对象模型（DOM）元素。一旦我们有权访问该元素，我们就可以确定该元素是否卷轴高度属性值超过元素的阴蒂属性值。

平台特定

需要注意的是，我们将在这里实施的策略是特定于平台的。澄清一下，Angular不仅仅是在浏览器上下文中构建单页应用程序的框架。相反，Angular可用于在中构建应用程序任何上下文，但最常用于浏览器、Node.js、electron的上下文，用于构建桌面应用程序，以及NativeScript或Ionic的上下文，用于构建混合移动应用程序。

总之，我们将使用iPlatformBrowser（）中提供的功能@角/普通用于验证应用程序是否确实在浏览器上下文中执行的模块。

这个椭圆定向

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

@指示({选择器:“[appEllipsis]”})出口班椭圆定向工具AfterViewInit{/**本地HTML元素*/私有的得到埃尔():HTMLElement{返回这.elementRef.本土元素;}/**原文*/私有的内部文本:一串;建造师(私有的只读元素参考:ElementRef,@注射(站台ID)私有的只读平台){}公众的ngAfterViewInit():无效的{这.截断();}@HostListener('窗口：调整大小')私有的onWindowResize(){这.截断();}私有的截断():无效的{//验证执行上下文是否为浏览器平台如果(!iPlatformBrowser(这.平台状)){返回;}//存储原始内部文本如果(这.内部文本===未定义){这.内部文本=这.埃尔.内部文本.修剪();}//重置内部文本这.埃尔.内部文本=这.内部文本;//截断文本并附加省略号常数文本=这.内部文本.分裂(' ');虽然(文本.长度>0&&这.埃尔.卷轴高度>这.埃尔.阴蒂){文本.流行音乐();这.埃尔.内部文本=`${文本.参加(' ')}…`;}}}

让我们深入了解椭圆定向:

• 首先，我们有一个方便的埃尔属性访问器，用于访问本土元素注入对象上的属性ElementRef类实例。请注意，此的返回类型是泛型HTMLElement. 这是必要的，因此我们在访问内部文本元素的属性。
• 其次是内部文本类属性是一个简单的一串其中，我们将在应用属性指令的元素中存储原始文本。
• 在构造函数（）函数我们正在注入ElementRef类实例以及平台状使用站台ID注入令牌。
• 该指令实现了AfterViewInit生命周期接口及其关联ngAfterViewInit（）生命周期方法。初始化视图后，我们可以根据元素的属性截断文本卷轴高度和阴蒂价值观我们将在下面的截断方法。
• 我们将调用截断（）方法在初始化视图后以及调整浏览器窗口大小时使用。
• 使用HostListener（）装潢师，我们可以听听调整大小事件发生在全局窗口对象上，然后根据需要截断文本。如果元素的宽度不固定，这一点尤为重要。
• 最后，在截断（）方法，我们将首先验证是否在浏览器的上下文中执行。然后，我们将存储内部文本属性，以便在以后需要根据调整大小的窗口截断文本时可以这样做。然后，我们通过比较元素的值来截断文本并附加省略号卷轴高度到阴蒂. 我们将继续删除单词，直到内容符合元素的指定高度。

演示

查看下面的stackblitz，并举例说明椭圆定向: