inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5629] enhanced way of providing translations (#8763)

Browse Source 
* enhanced way providing translations

* update documentation

* update documentation

* test fixes

* try add missing module import

* inject i18n to core module to cause the setup
This commit is contained in:
Denys Vuika
2023-07-18 20:06:09 +01:00
committed by GitHub
parent d70f689e06
commit 1a4d7ba008
11 changed files with 99 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
docs/core/services/translation.service.md
View File

@@ -62,7 +62,7 @@ this.trans.get(
total: "122"
}
).subscribe(translation => {
this.translatedText = translation;
this.translatedText = translation;
});
```
@@ -79,16 +79,21 @@ general format of the path to this folder will be:
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
**en.json**
...
"WELCOME_MESSAGE": "Welcome!"
...
```json
{
"WELCOME_MESSAGE": "Welcome!"
}
```
// fr.json
...
"WELCOME_MESSAGE": "Bienvenue !"
...
**fr.json**
```json
{
"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
@@ -97,66 +102,53 @@ look like the following:
```json
{
"title": "my app",
"LOGIN": {
"LABEL": {
"LOGIN": "Custom Sign In"
}
}
"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
`app.module.ts` file. Import `TRANSLATION_PROVIDER` and add the path of your
translations folder to the `providers`:
To enable the new translations in your app, you also need to register them in your `app.module.ts` file using `provideTranslations` api:
```ts
// Other imports...
import { TRANSLATION_PROVIDER } from "@alfresco/adf-core";
...
import { provideTranslations } from "@alfresco/adf-core";
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
{
provide: TRANSLATION_PROVIDER,
multi: true,
useValue: {
name: 'my-translations',
source: 'assets/my-translations'
}
}
...
providers: [
provideTranslations('my-translations', 'assets/my-translations')
]
})
export class MyModule {}
```
You can now use your new keys in your component:
```ts
...
ngOnInit() {
this.trans.use("fr");
this.trans.get("WELCOME_MESSAGE").subscribe(translation => {
this.translatedText = translation;
});
}
...
export class MyComponent implements OnInit {
translateService = inject(TranslationService);
translatedText = '';
ngOnInit() {
this.translateService.use("fr");
this.translatedText = this.translateService.instant('WELCOME_MESSAGE');
}
}
```
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.
Note: the `source` property points to the web application root.
Do not forget to configure your Angular application to copy the newly created files to the build output, for example:
```text
index.html
assets/ng2-alfresco-core/i18n/en.json
...
**angular.json**
```json
{
"glob": "**/*",
"input": "lib/core/src/lib/i18n",
"output": "/assets/adf-core/i18n"
}
```
You can register as many entries as you like.
@@ -180,4 +172,4 @@ class MyComponent {
## See Also
- [Internationalization](../../user-guide/internationalization.md)
- [Internationalization](../../user-guide/internationalization.md)