在混合AngularJS / Angular 5应用程序中重用* .resx（AngularJS）翻译文件

Posted 2021-04-17

您好我有AngularJS应用程序，它用于内化$ translateProvider和WebResources.resx文件：

angular.module('app')
    .config(['$translateProvider', 'sysSettings', 'ngDialogProvider',
        function($translateProvider, sysSettings, ngDialogProvider) {
            ngDialogProvider.setDefaults({
                closeByDocument: false
            });

            sysSettings.device = window['device'];

            if (window['device'] && ktmvPreference && ktmvPreference.preference) {
                sysSettings.webServiceURL = ktmvPreference.preference.webServiceURL;
                sysSettings.reportServiceURL = ktmvPreference.preference.reportServiceURL;
                sysSettings.onlineHelpURL = ktmvPreference.preference.onlineHelpURL;
            }

            $translateProvider.useSanitizeValueStrategy(null);
            $translateProvider.useLocalStorage();

            var savedLanguage = localStorage.language;
            if (savedLanguage)
                $translateProvider.fallbackLanguage([savedLanguage]);
            else
                $translateProvider.fallbackLanguage(['en', 'fr', 'es']);

            var url = sysSettings.webServiceURL + 'api/GlobalResources';

            $translateProvider.useUrlLoader(url);
            $translateProvider.useMissingTranslationHandlerLog();
            $translateProvider.useMissingTranslationHandler('ktmvTranslationFail');
        }
    ]);

现在我正在做AngularJS / Angular5 Hybrid应用程序。正如文档中提到的，Angular5使用“i18n”进行国际化。 “i18n”使用“* .xlf”文件来保存翻译。

那么在AngularJS / Angular5应用程序中只有这样才能保持WebResources.resx和messages.xlf文件具有相同的上下文？

有没有办法在AngularJS / Angular应用程序中重用AngularJS中的WebResources.resx转换？

答案

也许它对某人有用...为了能够在我的AngularJS / Angular内化中重用* / resx文件，我开始使用ngx-translate库。这是我实现它的方式：我创建了custom-translate-loader.ts

import { Injectable } from '@angular/core';
import { TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs/Observable';
import {HttpClient} from "@angular/common/http";


@Injectable()
export class CustomTranslateLoader implements TranslateLoader  {

  constructor(private http: HttpClient) {}
  getTranslation(lang: string): Observable<any>{
    var apiAddress = "http://localhost:26264/api/GlobalResources/?lang=" + lang;
    return Observable.create(observer => {
      this.http.get(apiAddress, ).subscribe(res => {
          observer.next(res);
          observer.complete();
        },
        error => {
          console.log("cannot retrieve Global Resources");
        }
      );
    });
  }
}

然后在我的app.module.ts我导入

import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {CustomTranslateLoader} from "./common/loader/custom-translate-loader";

在我的NgModule中我注入了TranslateModule：

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
    FormsModule,
    routingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: CustomTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [
    AppComponent,
    SignInComponent,
    ActivationComponent
  ],
  providers: [authServiceProvider,
    commonSvcProvider,
    BackgroundImageFactoryProvider,
    LanguageSvcProvider
  //  { provide: UrlHandlingStrategy, useClass: CustomHandlingStrategy }
  ],
  bootstrap: [AppComponent]
})

在我的组件（例如sign-in.components.ts）之后，我可以设置语言：

import {TranslateService} from "@ngx-translate/core";

export class SignInComponent implements OnInit{
  constructor(
    private translate: TranslateService) {

    translate.setDefaultLang('en');

  }