动态Angular模板中文本子字符串的自定义样式

Question

通过动态创建组件时或创建组件之后，只需具有文本的起点和终点，是否可以将诸如粗体/斜体或这两种样式一起应用于角度6中？现在，我可以为整个组件应用样式，但是我只想为元素中的特定文本应用样式，并且文本的长度将来自JSON。

请在此处找到stackblitz实现。

实际结果应根据偏移量和长度将样式应用于文本

Answer 1

是的，您应该能够根据文本字符串的长度或其他条件，使用条件ngStyle语句来实现此目的。例如，如果您的文本字符串超过20个字符，则应用粗体和斜体样式：

<div [ngStyle]="textString.length > 20 && {'font-weight': 'bold', 'font-style': 'italic'}">{{textString}}</div>

此处和此处的更多信息是Stackblitz上的示例。

另外，您可以以相同的方式有条件地应用ngClass，并将自定义样式放在CSS文件中。