时间戳

首页 > 解决方案 > 如何使用 ngx translate 翻译整个 html 页面

javascript - 如何使用 ngx translate 翻译整个 html 页面

问题描述

我的隐私政策嵌入为完整的 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 文件。有谁知道我会怎么做。提前致谢。

标签： javascriptangulartypescriptngx-translate

解决方案

您可以使用with service的instant方法翻译 HTML 模板。像这样的东西：TranslateServiceDomSanitizer

组件.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

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

推荐阅读