javascript - 如何使用Angular将字符串中的特定字符设置为粗体？

Question

在 Component.ts 文件中，我有一个变量 textValue = "Hello World!"; 和 subTextValue = "ll"。在 component.html 文件中，我尝试在“Hello World！”中设置字符串的特定字符！---->“他将成为世界！” 使用下面的代码行加粗。

<span>{{textVal.replace(textValue , '<b>' + subTextValue  + '</b>')}}</span>

但是，我得到的输出是 {{textVal.replace(textValue , '' + subTextValue + '')}}

有人可以帮我弄这个吗。

标签： javascriptangulartypescript

Answer 1

您应该在 innerHTML 中为此函数使用管道（用于呈现 html）

<span [innerHTML]="textVal | markBold:subTextValue"></span>

在管道中

transform(textVal: string, subTextValue: string): string {
    return textVal.replace(textValue , '<b>' + subTextValue  + '</b>');
}