我正在开发一个Angular应用程序,我正在寻找类似于
Android开发中可用的
Android资源的东西.
String mystring = getResources().getString(R.string.mystring);
我想在Angular中也一样.
例如,如果我有几个HTML模板,其中有关于提供的错误电子邮件的相同消息…
@H_502_10@<div class="alert alert-danger"> <strong>Error!</strong>Invalid e-mail </div>我想要以下内容：
@H_502_10@<div class="alert alert-danger"> <strong>Error!</strong>{{myStrings.INVALID_EMAIL}} </div>……或类似的东西……
@H_502_10@<div class="alert alert-danger"> <strong>Error!</strong>{{'INVALID_EMAIL' | stringGenerator}} </div>解决方法
将配置,翻译和资源与应用程序的逻辑分离是非常有用的.配置在其他上下文中也非常有用,例如,让api_url对任何休息调用都有用.
您可以使用@angular/cli设置此类内容.具有以下应用程序结构：
@H_502_10@|- app |- assets |- i18n - en.json - it.json |- json-config - development.json - env.json - production.json |- resources - en.json - it.json |- environment - environment.prod.ts - environment.ts |- config - app.config.ts哪里：
> app：包含所有应用程序逻辑
> assets / i18n / * .json：包含可在任何组件中使用的文本资源.对于我们想要涵盖的每种语言,都有一种.
例如. en.json：
@H_502_10@{ "TEST": { "WELCOME" : "Welcome" }E.G it.json：
@H_502_10@{ "TEST": { "WELCOME" : "Benvenuto" }> assets / json-config：包含要在开发模式和生产模式下使用的配置文件.还包含env.json,这是一个json,它说明了当前的开发模式：
例如. env.json：
@H_502_10@{ "env" : "development" }例如. development.json：
@H_502_10@{ "API_URL" : "someurl","MYTOKEN" : "sometoken","DEBUGGING" : true }> assets / resources：包含我们想要涵盖的每种语言的jsons资源文件.例如,它可能包含应用程序模型的jsons初始化.例如,如果您想要填充要传递给基于环境和/或语言的* ngFor个性化的模型数组,这将非常有用.这种初始化应该在每个想要通过稍后将要显示的AppConfig.getResourceByKey访问精确资源的组件内完成.
> app.config.ts：基于开发模式加载资源的Configuration Service.我将在下面显示一个片段.
基本配置：
为了在应用程序启动时加载基本配置文件,我们需要做一些事情.
app.module.ts：
@H_502_10@import { NgModule,APP_INITIALIZER } from '@angular/core'; /** App Services **/ import { AppConfig } from '../config/app.config'; import { TranslationConfigModule } from './shared/modules/translation.config.module'; // Calling load to get configuration + translation export function initResources(config: AppConfig,translate: TranslationConfigModule) { return () => config.load(translate); } // Initializing Resources and Translation as soon as possible @NgModule({ . . . imports: [ . . . TranslationConfigModule ],providers: [ AppConfig,{ provide: APP_INITIALIZER,useFactory: initResources,deps: [AppConfig,TranslationConfigModule],multi: true } ],bootstrap: [AppComponent] }) export class AppModule { }app.config.ts：
如上所述,该服务基于开发模式加载配置文件,在这种情况下,基于浏览器语言.如果要自定义应用程序,则基于语言加载资源非常有用.例如,您的意大利语发行版会有不同的路线,不同的行为或简单的不同文本.
每个Resources,Configuration和Enviroment条目都可以通过AppConfig服务的方法获得,例如getEnvByKey,getEntryByKey和getResourceByKey.
@H_502_10@import { Inject,Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { get } from 'lodash'; import 'rxjs/add/operator/catch'; import { TranslationConfigModule } from '../app/shared/modules/translation.config.module'; @Injectable() export class AppConfig { private _configurations: any = new Object(); private _config_path = './assets/json-config/'; private _resources_path = './assets/resources/'; constructor( private http: Http) { } // Get an Environment Entry by Key public getEnvByKey(key: any): any { return this._configurations.env[key]; } // Get a Configuration Entryby Key public getEntryByKey(key: any): any { return this._configurations.config[key]; } // Get a Resource Entry by Key public getResourceByKey(key: any): any { return get(this._configurations.resource,key); } // Should be self-explanatory public load(translate: TranslationConfigModule){ return new Promise((resolve,reject) => { // Given env.json this.loadFile(this._config_path + 'env.json').then((envData: any) => { this._configurations.env = envData; // Load production or development configuration file based on before this.loadFile(this._config_path + envData.env + '.json').then((conf: any) => { this._configurations.config = conf; // Load resources files based on browser language this.loadFile(this._resources_path + translate.getBrowserLang() +'.json').then((resource: any) => { this._configurations.resource = resource; return resolve(true); }); }); }); }); } private loadFile(path: string){ return new Promise((resolve,reject) => { this.http.get(path) .map(res => res.json()) .catch((error: any) => { console.error(error); return Observable.throw(error.json().error || 'Server error'); }) .subscribe((res_data) => { return resolve(res_data); }) }); } }translation.config.module.ts
此模块设置使用ngx-translate构建的翻译.根据浏览器语言设置翻译.
@H_502_10@import { HttpModule,Http } from '@angular/http'; import { NgModule,ModuleWithProviders } from '@angular/core'; import { TranslateModule,TranslateLoader,TranslateService } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { isNull,isUndefined } from 'lodash'; export function HttpLoaderFactory(http: Http) { return new TranslateHttpLoader(http,'../../../assets/i18n/','.json'); } const translationOptions = { loader: { provide: TranslateLoader,useFactory: HttpLoaderFactory,deps: [Http] } }; @NgModule({ imports: [TranslateModule.forRoot(translationOptions)],exports: [TranslateModule],providers: [TranslateService] }) export class TranslationConfigModule { private browserLang; /** * @param translate {TranslateService} */ constructor(private translate: TranslateService) { // Setting up Translations translate.addLangs(['en','it']); translate.setDefaultLang('en'); this.browserLang = translate.getBrowserLang(); translate.use(this.browserLang.match(/en|it/) ? this.browserLang : 'en'); } public getBrowserLang(){ if(isUndefined(this.browserLang) || isNull(this.browserLang)){ this.browserLang = 'en'; } return this.browserLang; } }好的,现在呢？我该如何使用这样的配置？
导入到app.module.ts中的任何模块/组件或其中任何导入到另一个导入translation.config.module的自定义模块的模块/组件现在可以根据浏览器语言自动转换任何插入的条目.例如,使用以下snipped将根据解释的行为生成Welcome或Benvenuto：
@H_502_10@{{ 'TEST.WELCOME' | translate }}如果我想获取资源来初始化将传递给* ngFor的某个数组,该怎么办？
在任何组件中,只需在构造函数中执行此操作：
@H_502_10@. . . // Just some model public navigationLinks: NavigationLinkModel[]; constructor(private _config: AppConfig) { // PAGES.HOMEPAGE.SIDENAV.NAVIGATION contains such model data this.navigationLinks = this._config.getResourceByKey('PAGES.HOMEPAGE.SIDENAV.NAVIGATION'); }当然,您也可以组合资源和配置.
