如何在 innerHTML 中使用 Angular 切片管道？答案

【问题标题】：How to use Angular slice pipe in innerHTML?如何在 innerHTML 中使用 Angular 切片管道？
【发布时间】：2021-04-26 07:51:09
【问题描述】：

我有一个 whatsNewDetail.content 字符串，其中包含 html 元素：

<span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; text-align: justify;">In nec convallis justo. Quisque egestas mollis nibh non hendrerit. Phasellus tempus sapien in ultricies aliquet. Maecenas nec risus viverra tortor rhoncus venenatis in sit amet enim. Integer id ipsum non leo finibus sagittis in eu velit. Curabitur sed dolor dui. Mauris aliquam magna a ipsum tincidunt tempor vitae sit amet ante. Maecenas pellentesque augue vitae quam faucibus, vel convallis dolor placerat. Pellentesque semper justo a turpis euismod, ac gravida enim suscipit.</span>

每当我使用切片管道时，它都不会显示任何内容。我假设 html 元素包含在切片中。

 <span style="font-size: 13px" [innerHTML]="whatsNewDetail.content | slice:0:15+'...'></span>

我想要实现的是要切片的文本：

In nec convalli...

不是

<span style="fo...

文本渲染后如何使用切片管道？

【问题讨论】：

没有直接的方法来操作innerHTML 绑定元素的内部文本。您需要采取一种复杂的方式来访问生成的 DOM，使用模板引用变量并在控制器中应用切片管道。相反，在返回 innerHTMLsn-p 的后端服务中执行该操作会更快、更高效、更优雅。
text-overflow: ellipsis; 可能就是您要找的，请查看w3schools.com/cssref/css3_pr_text-overflow.asp

标签： angular typescript

【解决方案1】：

这就是我设法做到的。我创建了一个隐藏元素来保存 innerHTML，并添加了一个名为 #whatsNew 的模板引用变量。

<p hidden [innerHTML]="whatsNewDetail.content" #whatsNew></p>

然后我创建了一个返回元素内部文本的函数。

getInnerText(el) {
  return el.innerText;
}

之后我用切片管道创建了元素

<p class="article-content">{{ getInnerText(whatsNew).length > 150 ? (getInnerText(whatsNew) | slice:0:150) +'...' : getInnerText(whatsNew) }}</p>

【讨论】：

【解决方案2】：

我可以建议的一种技术是 -

在 HTML 文件中 =>

<span style="font-size: 13px">
 <span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; text-align: justify;">{{whatsNewDetail.content.substring(0,15)}}...</span>
</span>

在 Ts 文件中 =>

whatsNewDetail= {content: `In nec convallis justo. Quisque egestas mollis nibh non hendrerit. Phasellus tempus sapien in ultricies aliquet. Maecenas nec risus viverra tortor rhoncus venenatis in sit amet enim. Integer id ipsum non leo finibus sagittis in eu velit. Curabitur sed dolor dui. Mauris aliquam magna a ipsum tincidunt tempor vitae sit amet ante. Maecenas pellentesque augue vitae quam faucibus, vel convallis dolor placerat. Pellentesque semper justo a turpis euismod, ac gravida enim suscipit.`}

这应该可以解决您的问题。

注意： 如果您打算通过单击 ... 来扩展文本，请单独为 '...' 使用单独的跨度并使用 ngif使用存储在 whatsNewDetail.content

中的文本扩展和收缩跨度

【讨论】：

这不起作用，因为 'whatsNewDetail.content' 的值是动态的。您可以格式化和编辑该值。我正在使用 ngxSummernote。
那么你是如何使用管道拼接这个动态字符串的，你必须发送一些动态值正确发送到子字符串方法..？@KapitanTeemo