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

Question

我正在使用 Electron 10 和 Angular 10，还使用 ngx-translate。我想在用户在下拉菜单中切换语言后更新当前 view/page 的翻译。

在开发过程中，我当然使用 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
    })

Answer 1

我认为您是从 lazyload-like 子模块调用 this.translate.use(lang)，这些子模块未注入到导入 TranslateModule 的根模块中。要从 lazyload 模块调用它，请创建一个名为 LanguageService:

的服务

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

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

并观察 language$ 从 app.component.ts 的变化：

...
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);
   }
}

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

How to update the current language with ngx-translate?

electron

ngx-translate

angular