6

我在 app.module.ts 中使用 TranslateHttpLoader 从服务器加载翻译文件，如下所示：

export function createTranslateLoader(http: Http) {
   return new TranslateHttpLoader(http, AppConfig.API_URL+'/static/i18n/', '.json');
}

@NgModule({
  ...

  imports: [

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

  ],
  ...
})

一切正常，但我想知道是否有办法在加载程序因任何原因（服务器问题、网络配置等）未能检索语言文件时捕获事件，并可能加载带有一些默认翻译字符串的本地 json 文件?

如果第一次加载的应用程序无法获取语言文件，我想捕获此事件，并回退到最小的本地 json 文件以仅显示翻译的维护页面/错误页面或其他内容。

4

3 回答 3

5

最后我写了一个自定义加载器来解决这个要求：

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from "@angular/http";
import { TranslateLoader } from '@ngx-translate/core';
import { AppConfig } from "./config"
import { Observable } from 'rxjs/Observable'; 


@Injectable()
export class CustomTranslateLoader implements TranslateLoader  {
    contentHeader = new Headers({"Content-Type": "application/json","Access-Control-Allow-Origin":"*"});

    constructor(private http: Http) {}
    getTranslation(lang: string): Observable<any>{
        var apiAddress = AppConfig.API_URL+"/static/i18n/"+ lang+".json";
        return Observable.create(observer => {
          this.http.get(apiAddress, { headers: this.contentHeader }).subscribe((res: Response) => {
                    observer.next(res.json());
                    observer.complete();               
                },
            error => {
                //  failed to retrieve from api, switch to local
                this.http.get("/assets/i18n/en.json").subscribe((res: Response) => {
                    observer.next(res.json());
                    observer.complete();               
                })
            }
            );
        }); 
    }
}

并在 app.module.ts

...
import { CustomTranslateLoader } from "../services/trans-loader"
...

@NgModule({
  ...

  imports: [

    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: CustomTranslateLoader,
        deps: [Http]
      }
    }), 

  ],
  ...
})
于 2017-07-25T06:26:25.373 回答
4

更新 Angular >= 4.3

由于新的 Angular 版本使用HttpClient而不是，因此 mike_t 的Http更新且更短的版本 将是：CustomTranslateLoader

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs/Observable';
import { catchError } from 'rxjs/operators';
import { AppConfig } from './config';


@Injectable()
export class CustomTranslateLoader implements TranslateLoader  {
    contentHeader = new HttpHeaders({
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
    });

    constructor(private httpClient: HttpClient) {}
    getTranslation(lang: string): Observable<any> {
        const apiAddress = AppConfig.API_URL + `/static/i18n/${lang}.json`;
        return this.httpClient.get(apiAddress, { headers: this.contentHeader })
          .pipe(
            catchError(_ => this.httpClient.get(`/assets/i18n/en.json`))
          );
    }
}
于 2019-07-15T09:55:08.703 回答
2

更新 Angular 12+

  1. 创建一个新的自定义翻译加载器
// loader/customTranslate.loader.ts
import { TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

const LOCAL_URL = 'http://your.url.blanik.me/api';

export class CustomTranslateLoader implements TranslateLoader {
  constructor(private httpClient: HttpClient) {}

  getTranslation(lang: string): Observable<any> {
    const url = `${LOCAL_URL}/assets/i18n/${lang}.json`;

    return this.httpClient.get(url).pipe(catchError((_) => this.httpClient.get(`/assets/i18n/en.json`)));
  }
}
  1. 更新 Angular 应用程序模块
// app.module.ts
// {...}
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { CustomTranslateLoader } from './loader/customTranslate.loader';

@NgModule({
  declarations: [AppComponent, OtherComponent],
  imports: [
    BrowserModule,
    // ...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: CustomTranslateLoader,
        deps: [HttpClient],
      },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
  1. 将语言切换添加到您的组件
<select class="form-control" #langauge (change)="translateSite(langauge.value)">
  <option *ngFor="let localization of translateService.getLangs()" [value]="localization"
          [selected]="localization === translateService.currentLang">
    {{ localization }}
  </option>
</select>

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent{
  title = 'your-app-name';

  constructor(public translateService: TranslateService) {
    translateService.addLangs(['en', 'fr', 'pl']);
    translateService.setDefaultLang('en');
  }

  translateSite(langauge: string) {
    this.translateService.use(langauge);
  }
}

请记住在您的服务器上设置正确的 CORS 和/或（推荐）将您的翻译文件保存在同一个域下。

不要在httpClient. 否则，浏览器将阻止读取文件。

干杯!

于 2021-10-13T11:31:19.530 回答