From 8f6c20e4e448e64831cb5bc608809aa28c20cb73 Mon Sep 17 00:00:00 2001 From: Holger Stolzenberg Date: Mon, 4 Mar 2024 00:17:09 +0100 Subject: [PATCH] Introduce I18nService as translation wrapper --- src/app/app.component.ts | 7 ++++--- src/app/header/header.component.ts | 4 ++-- src/app/i18n/i18n.module.ts | 4 +++- src/app/i18n/i18n.service.ts | 19 +++++++++++++++++++ src/app/map/map.service.ts | 8 ++++---- src/app/notifications/notification.service.ts | 12 ++++++------ 6 files changed, 38 insertions(+), 16 deletions(-) create mode 100644 src/app/i18n/i18n.service.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b3af918..248bb15 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit } from '@angular/core'; -import { TranslocoService } from '@ngneat/transloco'; import { NGXLogger } from 'ngx-logger'; import { Title } from '@angular/platform-browser'; +import { I18nService } from './i18n/i18n.service'; +import { firstValueFrom } from 'rxjs'; @Component({ selector: 'app-root', @@ -10,7 +11,7 @@ import { Title } from '@angular/platform-browser'; }) export class AppComponent implements OnInit { constructor( - private i18nService: TranslocoService, + private i18nService: I18nService, private logger: NGXLogger, private title: Title ) { @@ -18,6 +19,6 @@ export class AppComponent implements OnInit { } ngOnInit(): void { - this.i18nService.selectTranslate('header.title').subscribe(value => this.title.setTitle(value)); + firstValueFrom(this.i18nService.translate('header.title')).then(value => this.title.setTitle(value)); } } diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 3f88058..ef9a0d4 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { TranslocoService } from '@ngneat/transloco'; import { NGXLogger } from 'ngx-logger'; +import { I18nService } from '../i18n/i18n.service'; @Component({ selector: 'app-header', @@ -9,7 +9,7 @@ import { NGXLogger } from 'ngx-logger'; }) export class HeaderComponent { constructor( - private i18nService: TranslocoService, + private i18nService: I18nService, private logger: NGXLogger ) {} diff --git a/src/app/i18n/i18n.module.ts b/src/app/i18n/i18n.module.ts index 6c01039..e187050 100644 --- a/src/app/i18n/i18n.module.ts +++ b/src/app/i18n/i18n.module.ts @@ -3,6 +3,7 @@ import { isDevMode, NgModule } from '@angular/core'; import { I18nHttpLoaderService } from './i18n-http-loader.service'; import { provideHttpClient } from '@angular/common/http'; import { provideTranslocoPreloadLangs } from '@ngneat/transloco-preload-langs'; +import { I18nService } from './i18n.service'; @NgModule({ exports: [TranslocoModule], @@ -17,7 +18,8 @@ import { provideTranslocoPreloadLangs } from '@ngneat/transloco-preload-langs'; }, loader: I18nHttpLoaderService }), - provideTranslocoPreloadLangs(['en', 'de']) + provideTranslocoPreloadLangs(['en', 'de']), + I18nService ] }) export class I18nModule { diff --git a/src/app/i18n/i18n.service.ts b/src/app/i18n/i18n.service.ts new file mode 100644 index 0000000..27fa7a6 --- /dev/null +++ b/src/app/i18n/i18n.service.ts @@ -0,0 +1,19 @@ +import { Injectable } from '@angular/core'; +import { TranslocoService } from '@ngneat/transloco'; + +@Injectable() +export class I18nService { + constructor(private readonly translocoService: TranslocoService) {} + + getActiveLang() { + return this.translocoService.getActiveLang(); + } + + translate(key: string) { + return this.translocoService.selectTranslate(key); + } + + setActiveLang(languageCode: string) { + this.translocoService.setActiveLang(languageCode); + } +} diff --git a/src/app/map/map.service.ts b/src/app/map/map.service.ts index aa19217..1a1b482 100644 --- a/src/app/map/map.service.ts +++ b/src/app/map/map.service.ts @@ -17,15 +17,15 @@ export class MapService { private readonly euBordersLayer: Promise; constructor( - private http: HttpClient, - private log: NGXLogger, - private notificationService: NotificationService + private readonly http: HttpClient, + private readonly log: NGXLogger, + private readonly notificationService: NotificationService ) { this.euBordersLayer = this.initEuBordersLayer(); } private async initEuBordersLayer() { - return firstValueFrom(this.http.get('./assets/geo-data/european-borders.json2')) + return firstValueFrom(this.http.get('./assets/geo-data/european-borders.json')) .then(jsonResponse => { this.log.debug('Loaded borders json', jsonResponse); return geoJson(jsonResponse, { style: euBorderStyle }); diff --git a/src/app/notifications/notification.service.ts b/src/app/notifications/notification.service.ts index 7f21c87..cee2e9a 100644 --- a/src/app/notifications/notification.service.ts +++ b/src/app/notifications/notification.service.ts @@ -1,9 +1,9 @@ import { Injectable } from '@angular/core'; import { ToastrService } from 'ngx-toastr'; -import { TranslocoService } from '@ngneat/transloco'; import { NGXLogger } from 'ngx-logger'; import { HttpErrorResponse } from '@angular/common/http'; import { firstValueFrom } from 'rxjs'; +import { I18nService } from '../i18n/i18n.service'; export const options = { timeOut: 5000, @@ -15,15 +15,15 @@ export const options = { @Injectable() export class NotificationService { constructor( - private toastr: ToastrService, - private i18nService: TranslocoService, - private log: NGXLogger + private readonly toastrService: ToastrService, + private readonly i18nService: I18nService, + private readonly log: NGXLogger ) {} async showError(message: string, error: HttpErrorResponse) { this.log.error(message, error); - firstValueFrom(this.i18nService.selectTranslate('notifications.error-title')).then(title => - this.toastr.error(error.message, title, options) + firstValueFrom(this.i18nService.translate('notifications.error-title')).then(title => + this.toastrService.error(error.message, title, options) ); } }