NGX 翻译 Angular 9

Question

哎呀伙计们，你们好吗？我在 Angular 9 的这个项目上使用 ngx translate 时遇到问题，它没有获得 Assets 中的翻译。你能帮我吗？显然一切都很好。

appModule 
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
  })






Assets/i18n/
{
  "english": "Angular 9 Example",
  "portuguese": "Welcome to our app!"
}

Home Component  /

imports : [
TranslateModule
]

Home Component

constructor (private translate: TranslateService) { }

ngonit() {
translate.setDefaultLang('en');
}

<h2>{{ 'english' | translate }}</h2>

Answer 1

您的 i18n 翻译文件的 path 应包含在 HttpLoaderFactory 中，以便在使用前正确加载。

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

然后，应使用 translate.use('en'):

定义所选语言

ngOnInit() {
  this.translate.setDefaultLang('en');
  this.translate.use('en');
}

如果您使用的是 interceptor（例如 AuthInterceptor），您应该强制它只处理以 baseUrl 开头的请求，并忽略本地请求，例如以下：

intercept(
  request: HttpRequest<unknown>,
  next: HttpHandler
): Observable<HttpEvent<any>> {
  if (request.url.startsWith(environment.baseUrl)) {
    // Add your logic here
    // e.g. inject the token and next.handle the request again
  } else {
    return next.handle(request);
  }
}

NGX 翻译 Angular 9

NGX translate in Angular 9

javascript

ngx-translate

angular