Angular 如何使用ngx translate更新当前语言？

我使用的是Electron 10和Angular 10，还使用了

ngx translate

。我想在用户在下拉菜单中切换语言后更新当前视图/页面的翻译

在开发过程中，我当然使用Angular及其HTTP服务器，这就是为什么我使用

HttpLoaderFactory

。但是对于生产版本，我使用定制的

translateFactory

，它通过

TranslateUniversalLoader

加载JSON文件。这样可以吗

无论是在开发版本还是生产版本中，我都无法在不重新启动应用程序的情况下更新字符串。我有一个下拉菜单，在进行更改时，我只需调用

this.translate.use（lang）

。是否应该重新加载视图？这里的预期行为是什么

我注册模块如下：

export class TranslateUniversalLoader implements TranslateLoader {
       
  constructor() {
  }

  public getTranslation(lang: string): Observable<any> {
      return of(TRANSLATIONS[lang]);
    }
  }
  
  export function translateFactory() {
    return new TranslateUniversalLoader();
  }
}
...

@NgModule({
  declarations: [AppComponent],
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: isProductionBuild() ? translateFactory : HttpLoaderFactory,
        deps: [HttpClient]
      },
      isolate : false
    })

导出类TranslateUniversalLoader实现TranslateLoader{
构造函数（）{
}
公共getTranslation（lang:string）：可观察{
返回（翻译[lang]）；
}
}
导出函数translateFactory（）{
返回新的TranslateUniversalLoader（）；
}
}
...
@NGD模块({
声明：[AppComponent]，
进口：[
TranslateModule.forRoot({
加载器：{
提供：TranslateLoader，
useFactory:isProductionBuild（）？translateFactory:HttpLoaderFactory，
deps:[HttpClient]
},
孤立：假
})

我想您是在调用

this.translate.use（lang）

类似于lazyload的子模块，这些子模块没有注入到导入

TranslateModule

的根模块中。要从lazyload模块调用它，请创建一个名为

LanguageService

的服务：

@Injectable({ providedIn: 'root' })
export class LanguageService {
   language$ = new BehaviorSubject(null);

   applyLang(lang: string) {
      this.language$.next(lang);
   }
}

并从

app.component.ts

查看

language$

的更改：

...
export class AppComponent {
   constructor(private languageService: LanguageService, private translate: TranslateService) {
      this.languageService.language$.subscribe(lang => {
          if (lang) {
              this.translate.use(lang); // Use lang here
          }
      });
   }
}

现在，您可以使用LanguageService从任何懒散加载的模块更改语言

...
constructor(private languageService: LanguageService) {}

updateLanguage() {
   this.languageService.applyLang('en'); // Call from components belonging to lazyload modules
}

否则，通过直接从LanguageService调用translate.use来简化流程

@Injectable({ providedIn: 'root' })
export class LanguageService {
   constructor(private translate: TranslateService) {}

   applyLang(lang: string) {
      this.translate.use(lang);
   }
}

---

哇，非常感谢你的详细回答！我想你真的了解了一些事情。我实现了所描述的一切（+注册

LanguageService

），并可以确认使用相应的语言调用了

language$.subscribe

。但用户界面仍然没有更新。您知道我在这里可能缺少什么吗？我也将此库用于angular universal项目。因此，我在编写此文件之前快速尝试了此库，并确认其有效。您可以与我共享完整的app.module.ts吗？我刚刚意识到我没有正确加载所有语言：-o.你让我开心！我能在这个答案上悬赏吗？谢谢。这是吗？“开始悬赏”按钮位于问题的评论区下方