mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3087] Clarified section about adding/replacing keys in i18n guide (#3392)
* [ADF-3087] Clarified section about adding/replacing keys * [ADF-3087] Corrected information in i18n and translation service docs
This commit is contained in:
@@ -70,7 +70,7 @@ general format of the path to this folder will be:
|
|||||||
|
|
||||||
`<app>/src/assets/my-translations/i18n`
|
`<app>/src/assets/my-translations/i18n`
|
||||||
|
|
||||||
If you wanted English and French translations then you would copy the built-in
|
If you wanted English and French translations then you would add
|
||||||
`en.json` and `fr.json` files into the `i18n` folder and add your new keys:
|
`en.json` and `fr.json` files into the `i18n` folder and add your new keys:
|
||||||
|
|
||||||
// en.json
|
// en.json
|
||||||
@@ -84,6 +84,22 @@ If you wanted English and French translations then you would copy the built-in
|
|||||||
"WELCOME_MESSAGE": "Bienvenue !"
|
"WELCOME_MESSAGE": "Bienvenue !"
|
||||||
...
|
...
|
||||||
|
|
||||||
|
The files follow the same hierarchical key:value JSON format as the built-in translations.
|
||||||
|
You can add new keys to your local files or redefine existing keys but the built-in definitions
|
||||||
|
will be used for any keys you don't explicitly define in your files. For example, `en.json` might
|
||||||
|
look like the following:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"title": "my app",
|
||||||
|
"LOGIN": {
|
||||||
|
"LABEL": {
|
||||||
|
"LOGIN": "Custom Sign In"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
To enable the new translations in your app, you also need to register them in your
|
To enable the new translations in your app, you also need to register them in your
|
||||||
`app.module.ts` file. Import `TRANSLATION_PROVIDER` and add the path of your
|
`app.module.ts` file. Import `TRANSLATION_PROVIDER` and add the path of your
|
||||||
translations folder to the `providers`:
|
translations folder to the `providers`:
|
||||||
@@ -128,10 +144,6 @@ ngOnInit() {
|
|||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
The new translation files completely replace the built-in ones.
|
|
||||||
If you want to continue using the built-in keys then you must add your new
|
|
||||||
keys to copies of the existing files.
|
|
||||||
|
|
||||||
Note: the `source` property points to the web application root. Ensure you have
|
Note: the `source` property points to the web application root. Ensure you have
|
||||||
webpack correctly set up to copy all the i18n files at compile time.
|
webpack correctly set up to copy all the i18n files at compile time.
|
||||||
|
|
||||||
|
@@ -14,7 +14,7 @@ fairly straightforward to maintain.
|
|||||||
- [I18n concepts](#i18n-concepts)
|
- [I18n concepts](#i18n-concepts)
|
||||||
- [ADF support for i18n](#adf-support-for-i18n)
|
- [ADF support for i18n](#adf-support-for-i18n)
|
||||||
- [Using the translate pipe](#using-the-translate-pipe)
|
- [Using the translate pipe](#using-the-translate-pipe)
|
||||||
- [Adding your own messages](#adding-your-own-messages)
|
- [Adding and replacing messages](#adding-and-replacing-messages)
|
||||||
- [Interpolations](#interpolations)
|
- [Interpolations](#interpolations)
|
||||||
- [Selecting the display language](#selecting-the-display-language)
|
- [Selecting the display language](#selecting-the-display-language)
|
||||||
- [Support for i18n within ADF components](#support-for-i18n-within-adf-components)
|
- [Support for i18n within ADF components](#support-for-i18n-within-adf-components)
|
||||||
@@ -149,13 +149,34 @@ component's `.ts` file:
|
|||||||
|
|
||||||
<!-- {% endraw %} -->
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
## Adding your own messages
|
## Adding and replacing messages
|
||||||
|
|
||||||
The built-in translations certainly won't cover everything you will need for
|
The built-in translations certainly won't cover everything you will need for
|
||||||
your app but you can easily replace them with your own lists. This involves
|
your app but you can easily replace them with your own lists. This enables you
|
||||||
making copies of the existing lists in your app's folder and adding your
|
to add new keys and also replace the text of existing keys with your own.
|
||||||
own keys. See the [Translation service](../core/translation.service.md) page for
|
|
||||||
full details and examples.
|
To modify the default translations, you need to create local translation source files
|
||||||
|
(en.json, fr.json, etc) within your application. The local files have the same basic
|
||||||
|
hierarchical key:value structure as the built-in translations. You can add new keys to
|
||||||
|
your local files to extend the default set or override a default translation by redefining
|
||||||
|
an existing key with new message text. The default translations will be used for any keys
|
||||||
|
that you don't explicitly override. For example, your local `en.json` might look like the
|
||||||
|
following:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"title": "my app",
|
||||||
|
"LOGIN": {
|
||||||
|
"LABEL": {
|
||||||
|
"LOGIN": "Custom Sign In"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The [Translation service](../core/translation.service.md) page has full details
|
||||||
|
of how to add custom translations, including the locations of the required files
|
||||||
|
and code samples for enabling the new translations in your app.
|
||||||
|
|
||||||
## Interpolations
|
## Interpolations
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user