Angular中实现文本局部加粗及HTML标签不生效问题求助

你碰到的这个问题，本质是Angular的ngx-translate管道默认会自动对HTML内容进行sanitize（清理），把标签转换成实体字符，所以哪怕用了innerHTML，这些转义后的标签也没法被正常渲染成加粗样式。

下面给你两个可行的解决方案：

方案1：在TranslatePipe中指定sanitize选项为'unsafe' #

直接在模板里使用管道时，添加第三个参数来关闭默认的HTML转义：

<span [innerHTML]="information | translate:null:'unsafe'"></span>

这里的null是占位的翻译参数（如果不需要传递动态参数就填null），'unsafe'的作用就是告诉管道不要处理HTML标签，让innerHTML能正常解析它们。

方案2：全局配置TranslateModule的sanitize策略 #

如果希望整个应用的TranslatePipe都默认不转义HTML（前提是你能确保所有翻译内容都是可信的），可以在导入TranslateModule时全局配置：

import { TranslateModule, TranslateSanitizer } from '@ngx-translate/core';

@NgModule({
  imports: [
    TranslateModule.forRoot({
      sanitize: TranslateSanitizer.UNSAFE
    })
  ]
})
export class AppModule { }

配置完成后，你原来的<span [innerHTML]="information | translate"></span>写法就能直接渲染加粗效果了。

关键安全提醒 #

只有当你的翻译内容是完全由你控制的可信内容时，才使用'unsafe'策略！如果内容来自用户输入或者不可信的外部源，这么做会存在XSS攻击的风险，一定要谨慎使用。

另外记得确认你的翻译JSON文件内容格式正确，比如：

"INFORMATION": "<b>Here's an</b> example of text"

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