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

Question

你好，我有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混合应用程序。正如文档中提到的，Angular5使用"i18n"进行国际化。"i18n"使用"*.xlf"文件来保留翻译。

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

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

Answer 1

也许这对某人有用... 为了能够在我的 AngularJS/Angular 内部化中重用 */resx 文件，我开始使用 ngx-translate 库。 这是我实现它的方式： 我创建了自定义翻译加载器.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");
}
);
});
}
}

然后在我的应用程序中导入了模块

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

在我的 NgModule 中，我注入了翻译模块：

@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]
})

在此之后，在我的组件(例如登录.components.ts(中，我可以设置语言：

import {TranslateService} from "@ngx-translate/core";
export class SignInComponent implements OnInit{
constructor(
private translate: TranslateService) {
translate.setDefaultLang('en');
}