如何使用ngx-translate转换整个html页面

Question

我的隐私策略嵌入为完整的html。我想用ngx-translate来翻译它，但如果我按照ngx-translation的建议，按照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文件。有人知道我会怎么做吗。提前谢谢。

Answer 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。

template.html

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

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

i18n.json

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

我给你留了一个stackbliz的链接，看看一个正在运行的例子：

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

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