Angular 6 - 翻译动态文本

Question

对于我的应用程序中的所有静态文本，我使用的是 i18n 但现在我遇到了这样的情况。在我的 service.ts 文件中，我有一些硬编码的 JSON，例如

sources = [
{ title: 'Phone', description: 'phone description', icon: 'phone', type: 'phone' },
{ title: 'Chat', description: ' Chat description', icon: 'chat', type: 'chat' },
{ title: 'Email', description: 'Email description', icon: 'mail_outline', type: 'email' }
];

然后在我的 HTML 中，我正在 *ngFor'ing，但问题是我无法在 HTML 中执行 i18n 。当前的解决方案是在我的 TS 文件中获取用户语言或浏览器语言(如果我没有用户语言)，然后根据此情况从服务获取不同的 JSON。

有人能想出另一种解决方案或解决这个问题的方法吗？

谢谢

Answer 1

您可能想查看using the select option的 Angular 平移。这对我来说已经很有效了。

哦，您可能想跳过他们建议在源语言中使用虚拟表达式的部分，我发现这会不必要地搞乱事情。如果您要提供 xlf 文件进行翻译，则无论如何您都需要源文本，并且“ng xi18n”无论如何都会为您复制所有多余的文本。所以，我的模板如下所示:

...<button class="tab" *ngFor="let tab of tabService.tabs">
    <label i18n="|tab categories@@toolbarTabName">
        { tab.key, select, realTimeEvents {Real-Time} reporting {Reporting} status {Status} dashboards {Dashboards} configuration {Configuration} }
    </label>
</button>...

其中 tabs.key 是参数，其值对应于翻译文件和模板的“select”部分之后的 {} 之前的内容。

我的 messages.nl.xlf 文件是这样的:

<source>{VAR_SELECT, select, realTimeEvents {Real-Time Event Messages} reporting {Reporting} status {Status} dashboards {Dashboards} configuration {Configuration}}</source>
<target>{VAR_SELECT, select, realTimeEvents {Real-Time Gebeurtenisse} reporting {Rapportering} status {Status} dashboards {Dashboards} configuration {Configuratie}}</target>

(忽略翻译的质量，这仍然是 POC，但它有效;-) )