tldr: ng2-translate, but with positional instead of named arguments, and the support for pluralization, ordinals and a "switch statement" from MessageFormat, with a simpler JSON format that does away with the need for a parser.
Translations are stored in JSON format.
Each translation is stored and retrieved with a key.
Translations can use positional placeholders to be replaced by variables, which are passed as an array of String and/or Number values.
The {r0}
placeholder is replaced with the first value from the input array, the {r1}
is replaced with the second and so on.
Besides simple replacement, there are other three special placeholders: The Plural placeholder {p0}
, the Ordinal placeholder {o0}
and the Select or Switch placeholder {s0}
. These are inspired by @SlexAxton/messageformat.js, and use the same ICU keys where applicable (zero, one, two, few, many, other).
When the Plural placeholder {p0}
is used, the translation file can provide nouns for the appropriate ICU keys (zero, one, many etc.)
For the Selector or Switch placeholder {s0}
, the translation file can provide a map of arbitrary keys and values.
Finally, for the Ordinal placeholder {o0}
, the translation file can provide the appropriate ordinal number translations.
In addition to the placeholders in the translated string, values passed to the Plural, Selector/Switc and Ordinal placeholders can themselves contain Nested Placeholders in the format {(p|s|o)<input_index>.<arbitrary_key>}
. For example: {p0.1}
.
An Angular service would be provided to select and load language JSON files, as well as a simple translate(msg:string, input:Array)
method.
A TranslatePipe
could be provided as well, mimicking @ocombe/ng2-translate:
@Compoenent({
template: `
<div class="notifications">{{ "new-notifications" | translate[unreadNotifications.length] }}</div>
<a (click)="loginWithGoogle()">{{ "login-with" | translate["Google"] }}</a>
<a (click)="loginWithGitHub()">{{ "login-with" | translate["GitHub"] }}</a>
<div class="assistant-research-results">
{{ "found-x-in-nth-cat" | tanslate[assistant.gender, results.length, category.index] }}
</div>
`
})
This gist includes the example translation files en.json
and pt.json
. Note that in the Portuguese translation, one of the replacement values required a Nested Replacement, written as {p1.0}
.
As rob mentioned, there is a work in progress for built-in i18n in Angular 2 angular/angular#9104
Right now I don't have the slightest idea on how it will look like, but pretty much every capability I've described seem to have been at least discussed, and much more. I'll keep an eye out for any official announcements, but if they take a while to release anything, it might be worth making this happen :)