是否有可能在页面重新加载后具有工作角度i18通用翻译，而没有组件懒负载？

问题描述 投票：0回答：1
app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { I18NEXT_SERVICE, I18NextModule, defaultInterpolationFormat } from 'angular-i18next'; import i18next from 'i18next'; import HttpApi from 'i18next-http-backend'; import LanguageDetector from 'i18next-browser-languagedetector'; const i18nextOptions = { debug: true, fallbackLng: 'en', supportedLngs: ['en', 'de', 'cz'], ns: ['translation', 'validation', 'error'], interpolation: { format: I18NextModule.interpolationFormat(defaultInterpolationFormat) }, backend: { loadPath: '/assets/i18n/{{lng}}.json', }, detection: { order: ['localStorage', 'navigator', 'htmlTag'], caches: ['localStorage'], }, }; // Initialize i18next before providing it i18next .use(HttpApi) .use(LanguageDetector) .init(i18nextOptions); export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync(), { provide: I18NEXT_SERVICE, useValue: i18next }, I18NextModule.forRoot({}).providers! ] };

app.Routes.ts


import { Routes } from '@angular/router';

export const routes: Routes = [
    {
        path: '',
        loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent),
        title: 'App Home'
    },
    {
        path: 'languages',
        loadComponent: () => import('./pages/languages/languages.component').then(m => m.LanguagesComponent),
        title: 'App languages'
    }
];


app.component.ts


import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { I18NextModule } from 'angular-i18next';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [
    RouterOutlet,
    CommonModule,
    I18NextModule
  ]
})
export class AppComponent implements OnInit{

  constructor(private router: Router) {}

  ngOnInit(): void {
    const setup = localStorage.getItem('setup');
    if (!setup) {
      this.router.navigate(['/languages']);
    }
  }
}


language-picker.component.ts


import { ChangeDetectionStrategy, signal, Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { I18NextModule, ITranslationService, I18NEXT_SERVICE } from 'angular-i18next';
import { Language } from '@app/enums/language.enum';

@Component({
  selector: 'app-language-picker',
  standalone: true,
  imports: [
    CommonModule,
    MatButtonModule,
    MatIconModule,
    I18NextModule
  ],
  templateUrl: './language-picker.component.html',
  styleUrls: ['./language-picker.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LanguagePickerComponent implements OnInit {
  @Output() nextStep = new EventEmitter<void>();
  languageEnum: typeof Language = Language;
  language = signal<string>(Language.NONE);

  constructor(@Inject(I18NEXT_SERVICE) private i18NextService: ITranslationService) {
    const savedLanguage = window.sessionStorage.getItem('selectedLanguage') as Language;
    if (savedLanguage) {
      this.language.set(savedLanguage);
    }
  }

  async ngOnInit(): Promise<void> {
    // Subscribe to language changes
    this.i18NextService.events.initialized.subscribe((initialized) => {
      if (initialized) {
        this.language.set(this.i18NextService.language);
      }
    });
  }

  selectLanguage(lang: Language) {
    window.sessionStorage.setItem('selectedLanguage', lang);

    if (lang !== this.i18NextService.language) {
      this.i18NextService.changeLanguage(lang).then(() => {
        this.language.set(lang);
      });
    }
    this.nextStep.emit();
  }
}


language-picker.component.scss


.language-select {
    .row {
        .col-lg-4 {
            img {
                cursor: pointer;
                height: 125px;

                &:hover {
                    transform: scale(1.1);
                    transition: transform 0.3s ease;
                }

                &:not(:hover):not(.selected) {
                    transform: scale(1);
                    transition: transform 0.3s ease;
                }

                &.selected {
                    border-radius: 5px;
                    transform: scale(1.3) !important;
                    transition: transform 0.3s ease;
                }
            }
        }
    }
}


language-picker.component.html


<div class="px-xs-2 px-sm-2 px-md-2 px-lg-5 py-3 py-sm-3 py-md-3 py-lg-3 d-flex flex-column row-gap-2 align-items-center column-gap-3">
    <div class="d-flex flex-column text-center">
        <h1 class="text-center">{{ 'Select language' | i18next }}</h1>
        <p>{{ 'Selected language will be used for the setup' | i18next }}</p>
    </div>
    <section class="language-select">
        <div class="row g-5 flex-lg-row flex-column align-items-center py-2">
            <div class="col-lg-4 col-12 text-center">
                <img
                    width="200"
                    height="125"
                    src="assets/images/de.webp"
                    class="img-fluid"
                    [class.selected]="language() === languageEnum.DE" 
                    (click)="selectLanguage(languageEnum.DE)"
                >
            </div>
            <div class="col-lg-4 col-12 text-center">
                <img
                    width="200"
                    height="125"
                    src="assets/images/cz.webp"
                    class="img-fluid"
                    [class.selected]="language() === languageEnum.CZ"
                    (click)="selectLanguage(languageEnum.CZ)"
                >
            </div>
            <div class="col-lg-4 col-12 text-center">
                <img
                    width="200"
                    height="125"
                    src="assets/images/gb.webp"
                    class="img-fluid"
                    [class.selected]="language() === languageEnum.EN"
                    (click)="selectLanguage(languageEnum.EN)"
                >
            </div>
        </div>
    </section>
</div>

现在我需要这个app.routes.ts看起来像这样（没有懒惰的加载）：


import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { LanguagesComponent } from './pages/languages/languages.component';

export const routes: Routes = [
    {
        path: '',
        component: HomeComponent,
        title: 'App home'
    },
    {
        path: 'languages',
        component: LanguagesComponent,
        title: 'App languages'
    }
];



没有收到此警告，并在页面重新加载后将当前语言存储在会话存储中的当前语言。我该如何实现？

Console警告和日志（当我不使用懒惰加载时）：
language-picker.component.html:3 i18next: hasLoadedNamespace: i18next was not initialized undefined

language-picker.component.html:3 i18next::translator: key "Select language" for languages "en" won't get resolved as namespace "translation" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

language-picker.component.html:3 i18next::translator: missingKey undefined translation Select language Select language

language-picker.component.html:4 i18next::translator: missingKey undefined translation Selected language will be used for the setup Selected language will be used for the setup

language-picker.component.html:3 i18next: hasLoadedNamespace: i18next was not initialized (2) ['de', 'en']

language-picker.component.html:3 i18next::translator: key "Select language" for languages "de, en" won't get resolved as namespace "translation" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

language-picker.component.html:3 i18next::translator: missingKey de translation Select language Select language

language-picker.component.html:4 i18next::translator: missingKey de translation Selected language will be used for the setup Selected language will be used for the setup


    

	

trory调整初始化器代码，以便您使用
provideAppInitializer
并使用
importProvidersFrom


angular

lazy-loading

i18next


1个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        
export function appInit() {
  const i18next: ITranslationService = inject(ITranslationService);
  return i18next.init({
    debug: true,
    fallbackLng: 'en',
    supportedLngs: ['en', 'de', 'cz'],
    ns: ['translation', 'validation', 'error'],
    interpolation: {
      format: I18NextModule.interpolationFormat(defaultInterpolationFormat)
    },
    backend: {
      loadPath: '/assets/i18n/{{lng}}.json',
    },
    detection: {
      order: ['localStorage', 'navigator', 'htmlTag'],
      caches: ['localStorage'],
    },
  });
}

export function localeIdFactory(i18next: ITranslationService)  {
    return i18next.language;
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes), 
    provideAnimationsAsync(),
    {
      provide: I18NEXT_SERVICE,
      useValue: i18next
    },
    provideAppInitializer(appInit),
    importProvidersFrom([
      I18NextModule.forRoot(),
      {
        provide: LOCALE_ID,
        deps: [I18NEXT_SERVICE],
        useFactory: localeIdFactory,
      },
    ]),
  ]
};


    
	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.