Angular 6 - перевод динамического текста - PullRequest
Новая
       7

Angular 6 - перевод динамического текста

0 голосов
/ 06 июня 2018

Для всего статического текста в моем приложении я использую 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 ', хотя проблема в том, что я не могу сделать i18n в HTML,Текущее решение состоит в том, чтобы в моем файле TS получить язык пользователя или язык браузера, если у меня нет пользователя lang, а затем получить другой JSON из службы, в зависимости от этого.

Может кто-нибудь придумать другое решение илиобойти это?

Спасибо

1 Ответ

0 голосов
/ 31 июля 2018

Возможно, вы захотите просмотреть , используя опцию выбора углового перевода.Это в значительной степени сделало это для меня.

О, и вы можете пропустить ту часть, где они рекомендуют просто использовать фиктивное выражение на исходном языке, я обнаружил, что это излишне запутывает вещи.И если вы отдаете файлы 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, но это работает ;-))

...