Ngx-translation 不适用于离子中的不同模块

Question

我想让我的 ionic 应用程序支持多种语言。我创建了一项名为 translate-config.service.ts 的服务，我根据用户偏好获取和设置语言，并将 selected 语言存储在本地存储中。以下是我的服务

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Storage } from '@capacitor/storage';
export const APPLICATION_LANGUAGE = 'appLanguage';
@Injectable({
  providedIn: 'root'
})
export class TranslateConfigService {

  constructor(
    private translate: TranslateService
  ) { }

  getDefaultLanguage() {
    
    let language: string;
    Storage.get({ key: APPLICATION_LANGUAGE }).then(res => {
      console.log("Language from service: ", res.value);
      //if language not set then set default language as browser language
      if (res.value === null || res === null || language === null) {
        language = this.translate.getBrowserLang();
        this.translate.setDefaultLang("en");
      } else {
        language = res.value;
        console.log("language::", language);
        this.translate.setDefaultLang(language);
      }

    }).catch(error => {
      //if error occured then set browser lanauge as default language
      language = this.translate.getBrowserLang();
      this.translate.setDefaultLang(language);
    });
    return language;
  }

  //below method will be called by user action to load specific json file to change application language text
  setLanguage(setlanguage) {
    console.log(setlanguage);
    this.translate.use(setlanguage);

    //story this language in local storage
    Storage.set({ key: APPLICATION_LANGUAGE, value: setlanguage });
  }
}

在 select 语言组件 html 上显示带有可用语言列表的下拉列表，我只是设置语言 select 由用户使用以下函数编辑

 languageChanged() {
    this.translateConfig.setLanguage(this.selectedLanguage);
  }

然后我创建了共享模块，通过它我应该能够跨多个模块获取语言，下面是我的共享模块。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//for transalation
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateConfigService } from '../../../app/services/translate-config.service';
import { HttpClient } from '@angular/common/http';

export function LanguageLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    //for translation
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (LanguageLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    TranslateConfigService
  ],
  exports: [
    TranslateModule
  ]
})
export class TransalationSharedModule { }

我在 app.module.ts 文件中导入了共享模块，它在 app.component.html 中工作正常，但我也有不同的模块。示例 Home.module.ts、Profile.module.ts。在那里我导入了共享模块但它不起作用，甚至翻译管道也没有错误。

我是不是做错了什么或遗漏了什么？

Answer 1

据我所知，您需要做一些更改

首先，您必须将您的翻译导入包代码移动到 app.module.ts 文件

其次，我认为你已经启用了延迟加载，所以在每个 *.module.ts 文件中你必须导入这个包 import { TranslateModule } from '@ngx-translate/core' 其他逻辑部分看起来不错

所以，一旦您完成这些更改，您的代码就会看起来正确

样本

app.module.ts

//for transalation
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

@NgModule({
  declarations: [
   ...
  ],
  imports: [   
 
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  entryComponents: [
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/');
}

Other.Module.ts

import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    TranslateModule
  ]
})
export class OtherModule { }

我希望你清楚，这个解决方案对你有用

Ngx-translation 不适用于离子中的不同模块

Ngx-translation not working across different modules in ionic

ionic-framework

angular