Angular中Ngx Translate渲染innerHTML丢失ID属性问题求助

在Angular项目中使用ngx-translate实现国际化时，遇到一个问题：当翻译内容包含HTML标签时，通过[innerHtml]绑定渲染后，只有class属性被保留，像id这类其他属性会被自动清理。

问题复现代码 #

翻译文件 i18n/en.json #

"CONTENT": "<h5 class='subsection-header' id='cont-1'>Events and characters</h5>"

组件模板 info.component.html #

<div class="section" [innerHtml]="'CONTENT' | translate"></div>

实际渲染结果 #

<h5 class="subsection-header">Events and characters</h5> <!-- id属性丢失 -->

原因分析 #

这是因为Angular内置的DomSanitizer会默认清理掉它认为不安全的HTML属性，而ngx-translate的默认配置只允许保留class属性，其他属性会被过滤。

解决方案 #

方法1：手动使用DomSanitizer信任HTML内容 #

通过bypassSecurityTrustHtml方法直接信任翻译后的HTML内容，保留所有属性。注意：仅当翻译内容完全可信时使用此方法，避免XSS攻击风险。

1. 在组件中引入依赖并创建处理方法：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html'
})
export class InfoComponent {
  constructor(
    private sanitizer: DomSanitizer,
    private translateService: TranslateService
  ) {}

  getTrustedContent(): SafeHtml {
    const rawContent = this.translateService.instant('CONTENT');
    return this.sanitizer.bypassSecurityTrustHtml(rawContent);
  }
}

2. 修改模板调用该方法：

<div class="section" [innerHtml]="getTrustedContent()"></div>

方法2：自定义ngx-translate的Sanitizer #

如果需要全局配置允许的属性，可以自定义一个Sanitizer替换ngx-translate的默认实现。

1. 创建自定义Sanitizer服务：

import { Injectable } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { TranslateSanitizer } from '@ngx-translate/core';

@Injectable()
export class CustomTranslateSanitizer implements TranslateSanitizer {
  constructor(private sanitizer: DomSanitizer) {}

  sanitize(value: string): string {
    // 这里可以自定义过滤规则，或者直接返回信任的HTML
    return this.sanitizer.bypassSecurityTrustHtml(value) as string;
  }
}

2. 在模块中配置替换默认Sanitizer：

import { NgModule } from '@angular/core';
import { TranslateModule, TranslateSanitizer } from '@ngx-translate/core';
import { CustomTranslateSanitizer } from './custom-translate-sanitizer';

@NgModule({
  imports: [TranslateModule.forRoot()],
  providers: [
    { provide: TranslateSanitizer, useClass: CustomTranslateSanitizer }
  ]
})
export class AppModule {}

这样配置后，所有通过translate管道处理的HTML内容都会保留完整属性，无需在每个组件单独处理。

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