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

Posted 2023-02-19

【中文标题】在混合 AngularJS/Angular 5 应用程序中重用 *.resx(AngularJS) 翻译文件

【英文标题】：reuse *.resx(AngularJS) translation files in hybrid AngularJS/Angular 5 application

【发布时间】：2019-02-12 01:08:45

【问题描述】：

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

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 混合应用程序。如文档中所述，Angular5 使用“i18n”进行国际化。 “i18n”正在使用“*.xlf”文件来保存翻译。

所以只有在 AngularJS/Angular5 应用程序期间保持 WebResources.resx 和 messages.xlf 文件具有相同的上下文？

有没有办法在 AngularJS/Angular 应用程序中重用来自 AngularJS 的 WebResources.resx 翻译？

【参考方案1】：

也许它对某人有用... 为了能够在我的 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');