1

Hello I have AngularJS application which is using for internalization $translateProvider and WebResources.resx files :

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');
        }
    ]);

Now I am doing AngularJS/Angular5 Hybrid application. As mentioned in documentation Angular5 is using "i18n" for internationalization. "i18n" is using "*.xlf" files to keep translations.

So only way during AngularJS/Angular5 application keep both WebResources.resx and messages.xlf files with the same context ?

Is there any way to reuse WebResources.resx translation from AngularJS in AngularJS/Angular application?

4

1 回答 1

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');

  }
于 2018-09-07T14:25:32.283 回答