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

Question

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

在开发过程中，我当然使用 Angular 及其 HTTP 服务器，这就是我使用 HttpLoaderFactory 的原因。但对于生产构建，我使用自定义的 translateFactory，它通过 TranslateUniversalLoader 加载 JSON 文件。这样可以吗？

无论是在开发还是生产版本中，我都无法在不重新启动应用程序的情况下更新字符串。我有一个下拉菜单，在更改时我只需调用 this.translate.use(lang) 。 View 是否应该重新加载？这里的预期行为是什么？

我按如下方式注册模块:

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

我认为您正在从类似延迟加载的子模块调用 this.translate.use(lang) ，这些子模块未注入(inject)到导入 TranslateModule 的根模块中。要从延迟加载模块调用它，请创建一个名为 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);
   }
}