如何使用 ngx translate 翻译整个 html 页面答案

【问题标题】：How to traslate a whole html page with ngx translate如何使用 ngx translate 翻译整个 html 页面
【发布时间】：2019-11-12 19:12:12
【问题描述】：

我的隐私政策嵌入为完整的 html。我想用 ngx-translate 翻译它，但如果我按照 ngx-translate 的建议按 html 标签翻译它，时间会很昂贵，而且完全是非结构化的。政策的设计如下：

<h1>Datenschutzerklärung</h1>
    <p>Verantwortlicher im Sinne der Datenschutzgesetze, insbesondere der EU-Datenschutzgrundverordnung (DSGVO), ist:
    </p>
    <p>Chinaedu Pascal Onwukwe</p>
    <h2 id="betroffenenrechte">Ihre Betroffenenrechte</h2>
    <p>Unter den angegebenen Kontaktdaten unseres Datenschutzbeauftragten können Sie jederzeit folgende Rechte ausüben:
    </p>
    <ul>
      <li>Auskunft über Ihre bei uns gespeicherten Daten und deren Verarbeitung (Art. 15 DSGVO),</li>
      <li>Berichtigung unrichtiger personenbezogener Daten (Art. 16 DSGVO),</li>
      <li>Löschung Ihrer bei uns gespeicherten Daten (Art. 17 DSGVO),</li>
      <li>Einschränkung der Datenverarbeitung, sofern wir Ihre Daten aufgrund gesetzlicher Pflichten noch nicht löschen
        dürfen (Art. 18 DSGVO),</li>
      <li>Widerspruch gegen die Verarbeitung Ihrer Daten bei uns (Art. 21 DSGVO) und</li>
      <li>Datenübertragbarkeit, sofern Sie in die Datenverarbeitung eingewilligt haben oder einen Vertrag mit uns
        abgeschlossen haben (Art. 20 DSGVO).</li>
    </ul> ...

我想找到一种方法来翻译这个而不翻译每个单独的 html 标签，但更像是替换一个 html 文件。有谁知道我会怎么做。提前致谢。

【问题讨论】：

您可以将 html 添加到翻译文件中，然后将其注入。为此，您可能想绕过 dom sanitizer。否则，你可以创建一些自定义逻辑来切换当前语言并将静态资源加载到 dom 中。
是 ngx-translate 可能是错误的方式吗？完整的 html 文件应该在不同版本的资产中提供静态服务，例如 de.html en.html es.html 并通过服务加载
你能举个例子吗？

标签： javascript angular typescript ngx-translate

【解决方案1】：

您可以使用TranslateService 的instant 方法和DomSanitizer 服务来翻译HTML 模板。像这样的：

组件.ts

constructor(
  public translate: TranslateService,
  public sanitizer: DomSanitizer
) {}

getTranslatedHtmlSnippet(s: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(this.translate.instant('HOME.TEXT'));
}

您可以使用innerHtml 注入翻译后的 HTML。

模板.html

<div [innerHtml]="getTranslatedHtmlSnippet()"></div>

为了工作，您必须在翻译文件中提供不同的模板。

i18n.json

{
  "HOME": {
    "TEXT": "<div style='color: red;'> eng <div>"
  }
}

我给你一个 stackbliz 的链接来查看一个运行的例子：

https://stackblitz.com/edit/angular-translation-service-cpupat

但是，我建议您不要使用这种方法，并且始终只翻译字符串/内容，而不是结构。如果你真的需要这种翻译并且不限于单个组件最好创建一个管道。

【讨论】：