ngx-translate - 检查翻译文件是否可用

Question

如何使用 ngx-translate 检查从navigator.language获得的结果是否有翻译文件可用？

我想做类似的事情：

if( checkLanguageAvailable (navigator.language)) {
 this.translate.use( navigator.language );
} else {
 this.translate.use( 'en' ); //Default fall back
}

Answer 1

您可以使用 ngx-translate 的 getLangs() 方法来获取可用语言的列表：

@Component({ ... })
export class MyController {
  constructor(private translate: TranslateService) {}

  checkLanguageAvailable(lang: string): boolean {
    return this.translate.getLangs().includes(lang);
  }
}

Answer 2

您可以在使用之前检查文件是否存在（制作 http.get，但这会加载文件...）

或使用missingTranslationHandler ，例如： app.module.ts

import ...

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

@NgModule({
  imports: [
    ...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      },
      isolate: true,
      missingTranslationHandler: [{provide: MissingTranslationHandler, useClass: TranslateHandler}]
    }),
    SimpleNotificationsModule.forRoot()
  ],
...

翻译处理程序

import {MissingTranslationHandler, MissingTranslationHandlerParams} from '@ngx-translate/core';

export class TranslateHandler implements MissingTranslationHandler {
  private response: String;
  handle(params: MissingTranslationHandlerParams) {   
    return 'some translated text'; // here u can return translation 
  }
}

Answer 3

更好的解决方案：

this.translate.use(navigator.language.split(/-|_/)[0]).toPromise().catch(() => {
  this.translate.use('en');
});