Angular 6 - 翻译动态文本答案

【问题标题】：Angular 6 - Translate Dynamic TextAngular 6 - 翻译动态文本
【发布时间】：2018-06-06 20:34:52
【问题描述】：

对于我的应用程序中的所有静态文本，我使用的是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。

谁能想到另一种解决方案或解决方法？

谢谢

【问题讨论】：

使用 Angular 9 你也可以这样做stackoverflow.com/a/61006883/3160597

标签： angular internationalization translation angular6

【解决方案1】：

您可能想查看角度转换的using the select option。这对我来说几乎是这样做的。

哦，您可能想跳过他们建议在源语言中仅使用虚拟表达式的部分，我发现这会不必要地搞砸事情。而且，如果您要提供 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 是参数，其值对应于翻译文件的“选择”部分和模板之后的 {} 之前的任何内容。

我的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，但它有效 ;-)）

【讨论】：