Question

是否可以通过在动态创建组件时或动态创建组件后仅具有文本的起点和终点来将粗体/斜体或这两种样式同时应用于角度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;
}

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

2 个答案: