以下是在Android中获取字符串的方法：
String mystring = getResources().getString(R.string.mystring);
我想在Angular中也一样.
例如,如果我有几个HTML模板,其中有关于提供的错误电子邮件的相同消息…
<div class="alert alert-danger">
<strong>Error!</strong>Invalid e-mail
</div>
我想要以下内容：
<div class="alert alert-danger">
<strong>Error!</strong>{{myStrings.INVALID_EMAIL}}
</div>
……或类似的东西……
<div class="alert alert-danger">
<strong>Error!</strong>{{'INVALID_EMAIL' | stringGenerator}}
</div>
你知道我可以安装的方法或插件吗？
解决方法
您可以使用@angular/cli设置此类内容.具有以下应用程序结构：
|- 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：
{
"TEST": {
"WELCOME" : "Welcome"
}
E.G it.json：
{
"TEST": {
"WELCOME" : "Benvenuto"
}
> assets / json-config：包含要在开发模式和生产模式下使用的配置文件.还包含env.json,这是一个json,它说明了当前的开发模式：
例如. env.json：
{
"env" : "development"
}
例如. development.json：
{
"API_URL" : "someurl","MYTOKEN" : "sometoken","DEBUGGING" : true
}
> assets / resources：包含我们想要涵盖的每种语言的jsons资源文件.例如,它可能包含应用程序模型的jsons初始化.例如,如果您想要填充要传递给基于环境和/或语言的* ngFor个性化的模型数组,这将非常有用.这种初始化应该在每个想要通过稍后将要显示的AppConfig.getResourceByKey访问精确资源的组件内完成.
> app.config.ts：基于开发模式加载资源的Configuration Service.我将在下面显示一个片段.
基本配置：
为了在应用程序启动时加载基本配置文件,我们需要做一些事情.
app.module.ts：
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.
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构建的翻译.根据浏览器语言设置翻译.
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：
{{ 'TEST.WELCOME' | translate }}
如果我想获取资源来初始化将传递给* ngFor的某个数组,该怎么办？
在任何组件中,只需在构造函数中执行此操作：
. . .
// 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');
}
当然,您也可以组合资源和配置.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。