Как перевести всю html-страницу с помощью ngx translate

Моя политика конфиденциальности встроена в виде полного html. Я хотел бы перевести его с помощью ngx-translate, но это было бы слишком дорого и совершенно неструктурировано, если бы я переводил его по тегу html, как это предлагает ngx-translate. Вот как устроена политика:

<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-файла. Кто-нибудь знает, как бы я это сделал. Заранее спасибо.


person Chinaedu Onwukwe    schedule 12.11.2019    source источник
comment
Вы можете добавить html в файл перевода, а затем просто ввести его. Вы можете обойти дезинфицирующее средство дома для этой цели. В противном случае вы можете создать некоторую пользовательскую логику, которая переключает текущий язык и загружает статический ресурс в дом.   -  person Christian Klemm    schedule 12.11.2019
comment
может быть, ngx-translate неправильный путь? полные html-файлы должны быть статическими в активах в разных версиях, таких как de.html en.html es.html, и загружаться службой.   -  person SourceCodeBot    schedule 12.11.2019
comment
Не могли бы вы привести пример?   -  person Chinaedu Onwukwe    schedule 12.11.2019


Ответы (1)


Вы можете перевести HTML-шаблон с помощью instant метода TranslateService с помощью службы DomSanitizer. Что-то вроде этого:

компонент.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

Однако я предлагаю вам НЕ использовать такой подход и всегда переводить только строку/контент, а не структуру. Если вам действительно нужен такой перевод и вы не ограничены одним компонентом, лучше создать канал.

person Merack    schedule 12.11.2019