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

Question

我正在使用 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
    })

Answer 1

我认为你是从类似 lazyload 的子模块调用this.translate.use(lang)的，这些子模块没有注入到导入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);
   }
}