diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 06e5bd4..5b76c74 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,61 +1,62 @@ -import { Component, OnDestroy } from '@angular/core'; +import { Component, HostListener, OnDestroy } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import { TranslateService, TranslateModule} from "@ngx-translate/core"; +import { TranslateService, TranslateModule } from '@ngx-translate/core'; import { Subscription } from 'rxjs'; + @Component({ selector: 'app-root', standalone: true, - imports: [ RouterOutlet, TranslateModule, ], + imports: [RouterOutlet, TranslateModule], templateUrl: './app.component.html', - styleUrl: './app.component.css' + styleUrls: ['./app.component.css'], // Fixed typo }) export class AppComponent implements OnDestroy { + private langChangeSub!: Subscription; + title = 'Strona'; - private langChangeSub: Subscription; + constructor(public translate: TranslateService) { + this.initializeLanguage(); + } - constructor( public translate: TranslateService ){ - - this.translate.addLangs(['pl', 'en']); + private initializeLanguage(): void { + const savedLang = localStorage.getItem('lang'); + const supportedLangs = ['pl', 'en']; - // Pobierz język przeglądarki i obetnij kod regionu // np. 'en' z 'en-US' - const browserLang = navigator.language .slice(0, 2); - // Wyświetl w konsoli dla weryfikacji - console.log('Język przeglądarki krótki:', browserLang); + this.translate.addLangs(supportedLangs); - if( browserLang == 'en' || browserLang =='pl' ){ - this.translate.setDefaultLang( browserLang ); - }else{ - this.translate.setDefaultLang('pl'); + if (savedLang && supportedLangs.includes(savedLang)) { + this.translate.use(savedLang); + } else { + const browserLang = navigator.language.slice(0, 2); + const defaultLang = supportedLangs.includes(browserLang) ? browserLang : 'pl'; + this.translate.setDefaultLang(defaultLang); } - // Ustaw język pobrany z przeglądarki, jeśli jest obsługiwany - // this.translate.use(browserLang.match(/en|pl/) ? browserLang : 'pl'); this.langChangeSub = this.translate.onLangChange.subscribe((event) => { - console.log('Język ustawiany:', event.lang); - // localStorage.setItem('lang', selectedLang); - //this.loadAboutDescription(); + console.log('Language set to:', event.lang); + localStorage.setItem('lang', event.lang); }); - - } - ngOnDestroy() { - // Unsubscribing from the event when the component is destroyed to avoid memory leaks - if( this.langChangeSub ) { - console.log('unsubscribe'); - this.langChangeSub.unsubscribe(); + + ngOnDestroy(): void { + if (this.langChangeSub) { + console.log('Unsubscribing from language change events'); + this.langChangeSub.unsubscribe(); } } - // app.component.ts - switchLanguage(language: string) { - this.translate.use(language); + + switchLanguage(language: string): void { + if (language !== this.translate.currentLang) { + this.translate.use(language); + } } + @HostListener('keydown', ['$event']) handleKeyDown(event: KeyboardEvent): void { if (event.key === 'Enter' || event.key === ' ') { - this.switchLanguage( this.translate.currentLang === 'pl' ? 'en' : 'pl'); + const newLang = this.translate.currentLang === 'pl' ? 'en' : 'pl'; + this.switchLanguage(newLang); event.preventDefault(); } } - - title = 'Strona'; }