Supplemental string resource files in Angular i18n

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Arian Kulp wants to to this question: ：

I'd prefer not just creating lookup methods to import everywhere. Ideally, it would be great to hook into the service when a key is looked up so I can do a replacement. Otherwise, a pseudo sub locale could work, but that requires completely providing separate translations. I'd love to just swap the single word on its own ("You added a {WIDGET|DOODAD} to cart"). Sorry if this is still fuzzy. Glad to add more details.

I'm working on an app that needs to be able to switch the name for a specific entity based on an admin flag. This doesn't vary by locale, but just that flag. For example, let's say the site has widgets. After a rebranding, we decide to call them doodads. Clients can choose to opt-in to the new branding (doodad) or keep the old (widget). Every language needs to localize phrases that include the term, using the right choice of "widgets" vs "doodads" based on that flag. We use the specific name in many places.

Step one for us was to extract the strings into resource files. I had considered that we would then do a sub-locale sort of thing like "en-us-doodad" vs "en-us" to override the word when selected. It looks like fake locales aren't actually supported though (update: this might be an option, but it requires completely overriding the resources with the word which isn't ideal).

Is there some way to use ICU for this? Is there a way to intercept string lookups to perform custom handling (like do our own replace value on the looked up string)? Do I need to create a custom directive? I was really hoping the localization system would enable this to work without too much effort.

Answer 1

With the ICU format you can do this with just one localisation file and do the format conditionally with a select statement (wich works like a switch in eg. Java).

<span i18n>
    You call widgets: {customizedName, select, doodad 
{Doodads} widget {Widgets}}
</span>

customizedName ist your components Variable. If its value is doodad, the string will contain Doodads, ... The Text in {}curly brackets is the value to show in the ui, the word infront is the value that needs to match the variable value.