NGX-Translate how not get 404?

Question

我在我的 Angular 应用程序上使用 NGX-Translate，即使翻译有效，我也只有 3 种语言的翻译（en-CA、pt-BR、en-US）。 这就是我设置语言的方式：

const defaultLanguage = translate.getBrowserCultureLang();
translate.setDefaultLang(defaultLanguage);

这里是问题所在，例如，浏览器的区域性语言是否设置为“fr-CA”，我收到 404 错误，提示找不到 fr-CA.json 文件。这是正确的，因为该文件不存在。有没有办法没有那个 404？或者我是否必须为每一种语言和文化创建一个文件？

Answer 1

认为您必须实现自定义

TranslateLoader

，如本GitHub问题中所述。

这

LazyTranslateLoader

将发送请求以获取当前语言的 JSON 文件。如果返回的响应不成功，它将获取默认语言的 JSON 文件。

import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

export const DEFAULT_LANG = 'en-US';
export class LazyTranslateLoader implements TranslateLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string): Observable<any> {
    return this.http
      .get(`/assets/i18n/${lang}.json`)
      .pipe(
        catchError(() => this.http.get(`/assets/i18n/${DEFAULT_LANG}.json`))
      );
  }
}

接下来，在位于根模块中的

LazyTranslateLoader

的配置中提供

TranslateModule

。

@NgModule({
  // ...,
  imports: [
    // ...,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: LazyTranslateLoader,
        deps: [HttpClient],
      },
    }),
  ]
})
export class AppModule {}

Demo @ StackBlitz

---

参考

编写并使用您自己的加载程序