-
Notifications
You must be signed in to change notification settings - Fork 5
I18n
Zeta provides many things to help you localize your website. The central service behind all the internationalization (i18n) is the I18nService, which you can feed with your translations via setTranslations(). Which i18n-method to choose depends on where your text occurs.
Use the xc-i18n directive.
<h1 xc-i18n>main-title</h1>
Use the xcI18n pipe.
<xc-button (click)="doSth()" xc-tooltip="{{'do-sth-tooltip' | xcI18n}}" xc-i18n>do-sth</xc-button>
Use the I18nService directly.
i18n.translate('modeller.workflow.exception');
All the xc-components (like xc-form-input or xc-button) already have a special handling to localize their attributes. For example, the label-attribute of the xc-form-input will be localized automatically as long as you set a xc-i18n-attribute.
You can also split your website into different contexts such that the same key is translated differently depending on the context, it occurs in.
To specify a context, use the xc-i18n-context-attribute. To specify the respective context inside your translations you have to follow the zeta-i18n-schema.
If you want a contexted language-key to be translated, although there is only a translation for a part of the context, set the flag contextDismantlingSearch.
The component xc-language-selector with the language key "select-language-label" brings its own translation:
{ key: 'select-language-label', value: 'Select language' }
Placing this component inside another context, there won't be an exact match for the language key:
<xc-panel xc-i18n-context="zeta.auth-login">
...
<xc-language-selector></xc-language-selector>
</xc-panel>
The I18nService will look for a translation for "zeta.auth-login.select-language-label". If there is none, it will stop. To dismantle the key and unwrap it from its contexts, you have to set the above-mentioned flag.
To localize your releases, you have two options:
- Create one build per language
- Compile all languages into one build
With the SelectableLanguage-interface, you can decide for one of these options.
If you settle for the second one, you have to subscribe to LocaleService::languageChange and force your UI to redraw to be able to switch the site's language at runtime.
As an example see how it's done in the xyna-modeller.