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

Question

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

Please find stackblitz implementation here.

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

Answer 1

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

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

更多信息here，这里是Stackblitz 的示例。

或者，您可以以相同的方式有条件地应用 ngClass，并在您的 CSS 文件中添加自定义样式。

Answer 2

方法 1 - Slice Pipe

如果您想根据某些文本中的字符位置而不是某些文本的总长度添加样式，并且您想纯粹在您的 HTML 模板中执行此操作，您可以使用 slice pipe 实现此目的。

我在下面和Stackblitz 上举了一个例子来说明如何应用它。 HTML 标记是可怕的，并且不能在代码中使用换行符，因为这些会在呈现的文本中引入不需要的空格，但我相信它涵盖了您的要求：

对于单个亮点：

TS：

singleString = 'London Kings Cross Station';
highlightStart = 3;
highlightLength = 5;

HTML：

<ng-container>{{singleString | slice:0:highlightStart}}</ng-container>
<span class="styled_text">{{singleString | slice:highlightStart:highlightStart+highlightLength}}</span>
<ng-container>{{singleString | slice:highlightStart+highlightLength:singleString.length}}</ng-container>

对于多个亮点：

TS：

textStrings = ['London Kings Cross', 'Bristol Temple Meads'];
stylePositions = [[3,3],[15,3]]; // Start position and length of sections to be styled

HTML：

<ul>
    <li *ngFor="let textString of textStrings">
        <ng-container *ngFor="let stylePosition of stylePositions; index as i">
  <ng-container *ngIf="i==0">{{textString | slice:0:stylePositions[0][0]}}</ng-container><ng-container *ngIf="i!=0">{{textString | slice:stylePositions[i-1][0]+stylePositions[i-1][1]:stylePositions[i][0]}}</ng-container><span class="styled_text">{{textString | slice:stylePositions[i][0]:stylePositions[i][0]+stylePositions[i][1]}}</span><ng-container *ngIf="i==stylePositions.length-1">{{textString | slice:stylePositions[i][0]+stylePositions[i][1]:textString.length}}</ng-container>
        </ng-container>
    </li>
</ul>

CSS：

.styled_text {
    font-weight: bold;
    font-style: italic;
    color: #ff0000;
}

方法 2 - Inner HTML

另一种方法是应用相同的原则，但使用一个函数将您的字符串分成多个部分，然后使用 innerHTML 将其传递给模板中的一个 div - 请参见下文和此 Stackblitz。

请注意，要使其正常工作，您还必须包含一个自定义管道来声明 HTML 是安全的，以便 Angular 使用样式进行渲染。这也包含在 Stackblitz 中，有更多详细信息 here。

styleText(string){
    let styledText= '';
    for (let i = 0; i < this.stylePositions.length; i++) { 
        if(i==0){
            styledText+=string.substring(0, this.stylePositions[i][0]);
        } else {
            styledText+=string.substring(this.stylePositions[i-1][0]+this.stylePositions[i-1][1],this.stylePositions[i][0]);
        }

        styledText+='<span style="color:#ff0000">'+string.substring(this.stylePositions[i][0],this.stylePositions[i][0]+this.stylePositions[i][1])+'</span>';

        if(i==this.stylePositions.length-1){
        styledText+=string.substring(this.stylePositions[i][0]+this.stylePositions[i][1],string.length);
        }
    }
    return styledText;
}