Angular字符串插值：如何为替换后的变量添加斜体样式

不拆分JSON字段的方案 #

不用拆分texts.json里的title字段，修改替换管道并结合[innerHTML]就能实现：

• 修改管道逻辑，把占位符替换为带斜体标签的内容：

// 假设你的管道名为ReplaceSpecimenPipe
transform(value: string, specimen: string): string {
  return value.replace('{{specimen_type}}', `<em>${specimen}</em>`);
}

• 模板中用[innerHTML]绑定渲染，避免Angular转义HTML：

<div [innerHTML]="texts.title | replaceSpecimen: specimen"></div>

这样既保留了JSON字段的完整性，替换后的specimen值也会以斜体显示。

必须拆分字符串的方案 #

如果一定要拆分JSON字段，用行内元素<span>（不会换行）或者直接用<em>包裹变量即可：

• 修改texts.json拆分字段：

{
  "titlePrefix": "Place your ",
  "titleSuffix": " here"
}

• 模板中直接拼接内容：

{{texts.titlePrefix}} <em>{{specimen}}</em> {{texts.titleSuffix}}

如果需要给前后文本加额外样式，用<span>包裹：

<span class="prefix">{{texts.titlePrefix}}</span> <em>{{specimen}}</em> <span class="suffix">{{texts.titleSuffix}}</span>

这种方式不会丢失样式，也不会出现换行问题。

为什么直接在JSON加标签会失效？ #

之前在JSON里加斜体标签后管道失效，是因为普通插值{{...}}会自动转义HTML内容，把<em>当成普通文本输出；而[innerHTML]会跳过转义，直接渲染HTML标签，所以能正常显示样式。

内容的提问来源于stack exchange，提问作者kd8