如何在 Angular 中设置大型动态文本字符串的样式？

Question

我目前正在使用 HomeAway API，它返回一个我必须包含在我的应用程序中的重要属性。它是一个描述，提供有关用户将看到的租赁列表的关键详细信息。

挑战：此描述作为一大段文本发送。

这个块有很多细节，确实必须在视觉上分开并进行风格化以使其可读。

我的问题：是否有任何优雅的方式来为可能的大块动态文本设置样式？

---

示例

返回的文本是这样的（为了理智而显着缩短）：

您的超现代智能家居承诺在好莱坞中心享受绝对奢华。宽敞的三层布局包括玻璃包裹的螺旋楼梯和带热水浴缸和隐私窗帘的优雅后院。关于房子 开放式客厅营造出凉爽的中世纪氛围，一张沙发和两把扶手椅与充满活力的白色墙壁相得益彰。从两间卧室的平板电脑控制从灯光到百叶窗的一切。家里的额外设施包括不锈钢洗衣机/干衣机套装和免费 Wi-Fi。街边有停车场。隔壁的家也可容纳更大的聚会。位置 步行即可到达 Larchmont 村，驱车可快速到达好莱坞的所有经典景点，这个独特的家就在您想去的地方。在不到 1 个街区的 Cafe Gratitude 享用素食和新鲜果汁。几步之外，Osteria Mamma 是您寻找浪漫晚餐的美味意大利餐厅和葡萄酒吧。对由交钥匙度假租赁公司管理的物业有何期望 TurnKey Vacation Rentals 是一家领先的全方位服务物业管理公司。我们保证所有列表信息都是准确和最新的。从您预订的那一刻起，您将获得有关您旅行的及时和有用的信息。抵达后，使用无钥匙安全门密码轻松进入您的单元；无需亲自交换密钥。

理想情况下

您的超现代智能家居承诺在好莱坞中心享受绝对奢华。宽敞的三层布局包括玻璃包裹的螺旋楼梯和带热水浴缸和隐私窗帘的优雅后院。

关于房子

开放式起居室营造出一种凉爽的世纪中叶氛围，一张沙发和两把扶手椅与充满活力的白色墙壁相得益彰。从两间卧室的平板电脑控制从灯光到百叶窗的一切。家里的额外设施包括不锈钢洗衣机/干衣机套装和免费 Wi-Fi。街边有停车场。隔壁的家也可容纳更大的聚会。

地点

这个独特的家距离拉奇蒙特村仅几步之遥，距离好莱坞的所有经典景点也只有很短的车程，是您想去的地方。在不到 1 个街区的 Cafe Gratitude 享用素食和新鲜果汁。几步之外，Osteria Mamma 是您寻找浪漫晚餐的美味意大利餐厅和葡萄酒吧。

对由交钥匙度假租赁管理的物业有什么期望

TurnKey Vacation Rentals 是一家领先的全方位服务物业管理公司。我们保证所有列表信息都是准确和最新的。从您预订的那一刻起，您将获得有关您旅行的及时和有用的信息。抵达后，使用无钥匙安全门密码轻松进入您的单元；无需亲自交换密钥。

---

您可以看到详细主题完全大写。我的倾向是构建一个自定义管道，以检测完全大写的单词。然而，主题不是一个词，而是很多。即使在检测到它们之后，我将如何设置管道中的 DOM 样式以格式化文本？

我是否过于复杂了？我有什么明显的遗漏吗？我问是因为这似乎是抽象解决方案的一个非常普遍的问题。有什么现代方法可以做到这一点的建议吗？

非常感谢任何帮助。 感谢您的观看...

Answer 1

在尝试使用管道进行此操作后，很明显它可能无法正常工作。 But I was able to get it to work using another method。我会回来解释一下发生了什么（我需要休息一下），但这里有一些值得深思的地方。

您的挑战

• 查找标题 - 实际上可以使用正则表达式找到它们，但是您会遇到一些问题，因为某些段落以 A 开头，最终会被标记为 (([A-Z]{1,} ){1,}) 这样简单的东西。 这是您可以考虑的事情，但我最初选择退出该方法。事后看来（20/20，你知道），如果你走这条路，最终可能会使用更少的代码。
• 设置标题样式
  • 因为它只是一个文本字符串，所以基本上需要在字符串中添加 HTML 除非你将正文和文本分开并使用 ngFor 和 @987654325 @ 以某种（复杂的）方式。
  • 如果您决定将 HTML 添加到文本中（如我所做的那样），您需要创建一个 空元素 来包含您的文本，然后将其更改为 innerHTML 成为最终文本.
  • 通过这样做，您将自己提交给使用内联样式或设置 encapsulation: ViewEncapsulation.None 在组件装饰器中。这样做意味着 Angular 不会在组件上使用 Shadow DOM，which you can read more about here。

Answer 2

如果您的文本格式与理想情况下显示的格式相同，那么您可以使用 p 标签并将 css 应用于 p 标签是white-space: pre-wrap;