Angular 13中字符串替换HTML标签后无法渲染粗体的问题求助

原因分析 #

Angular默认的插值表达式（{{变量名}}）会自动转义HTML标签，所以你拼接的<b>标签会被当作纯文本显示，无法渲染成粗体效果。

修复步骤 #

1. 调整组件模板的绑定方式
   将原来的插值绑定（比如{{wiadomosc}}）替换为[innerHTML]属性绑定，示例：

   <div [innerHTML]="wiadomosc"></div>
   

   这样Angular会把wiadomosc中的HTML内容解析并渲染，而不是转义成文本。

2. 优化代码中的HTML拼接
   你代码里的<b>是HTML实体转义字符，会被渲染成<b>文本而非标签，建议直接使用原始HTML标签：

   this.wiadomosc = msg.replace(txt.number, '<b>' + txt.number + '</b>');
   

额外注意（安全防护） #

如果wiadomosc的内容来自不可信来源，为避免XSS风险，需要用DomSanitizer处理：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

// 组件类中注入DomSanitizer
constructor(
  private cService: CService,
  private sanitizer: DomSanitizer
) { }

// 处理HTML内容
this.wiadomosc = this.sanitizer.bypassSecurityTrustHtml(
  msg.replace(txt.number, '<b>' + txt.number + '</b>')
);
// 同时将变量类型改为SafeHtml
wiadomosc: SafeHtml;

若内容来自可信的后端接口，可跳过此步骤。

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