Angular中的字符串资源 [英] String Resources in Angular

问题描述

我正在开发Angular应用，正在寻找与Android开发中可用的Android资源类似的东西.

I'm developing an Angular app and I'm looking for something similar to Android Resource available in Android development.

这是在Android中获取字符串的方法:

Here is the way to get a string in Android:

字符串mystring = getResources().getString(R.string.mystring);

我想在Angular中也有同样的东西.

I would like to have the same in Angular.

例如，如果我的HTML模板很少，其中有关于错误电子邮件的相同消息...

For example if I have few HTML templates in which there are the same message about the wrong email provided...

<div class="alert alert-danger">
      <strong>Error!</strong>Invalid e-mail
</div>

我想要以下内容:

<div class="alert alert-danger">
      <strong>Error!</strong>{{myStrings.INVALID_EMAIL}}
</div>

...或类似的东西...

...or something like this...

<div class="alert alert-danger">
      <strong>Error!</strong>{{'INVALID_EMAIL' | stringGenerator}}
</div>

您知道我可以安装的方法或附件吗?

Do you know a way or addon I can install to reach that?

推荐答案

将配置，转换和资源与应用程序的逻辑分开是非常有用的.配置在其他情况下也将非常有帮助，例如，使 api_url 对任何其他调用都有用.

Having configuration, translations and resources separated from application's logic is very useful. Configuration would also be very helpful in other context like, for example, getting api_url useful for any rest call.

您可以使用 @ angular/cli 进行设置.具有以下应用程序结构:

You can set up such thing using @angular/cli. Having the following application structure:

|- 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    

位置:

• 应用:包含所有应用逻辑
• 资产/i18n/*.json :包含可以在您的任何组件中使用的文本资源.我们要涵盖的每种语言都有一个.

• app: contain all application logics
• assets/i18n/*.json: contains a textual resources that can be used in any of your components. There's one of them for each language we want to cover.

E.G. en.json :

{
  "TEST": {
    "WELCOME"  : "Welcome"
}

E.G it.json :

{
  "TEST": {
    "WELCOME"  : "Benvenuto"
}

• assets/json-config :包含在开发模式和生产模式下使用的配置文件.还包含 env.json ，这是一个表示当前开发模式的json:
• assets/json-config: contains configuration files to use in development mode and production mode. Also contains env.json which is a json that says which is the current development mode:

E.G. env.json :

{
   "env" : "development"
}

E.G. development.json :

{
    "API_URL"   : "someurl",
    "MYTOKEN" : "sometoken",
    "DEBUGGING" : true
}

• 资产/资源:包含我们要介绍的每种语言的资源的jsons文件.例如，它可能包含应用程序模型的jsons初始化.例如，如果您想填充模型的数组以传递给基于环境和/或语言的个性化 * ngFor 个性化设置，这将非常有用.这样的初始化应该在每个想要通过 AppConfig.getResourceByKey 访问精确资源的组件内部完成，这将在稍后显示.

  • assets/resources: contains jsons files of resources per each language we want to cover. For instance, it may contain jsons initialization's for application models. It's useful if, for example, you want to fill an array of a model to be passed to an *ngFor personalized based on enviroment and/or language. Such initialization should be done inside each component which want to access a precise resource via AppConfig.getResourceByKey that will be shown later.

    app.config.ts :根据开发模式加载资源的配置服务.我将在下面显示一个代码段.

    app.config.ts: Configuration Service that loads resources based on development mode. I will show a snippet below.

    基本配置:

    为了在应用程序启动时加载基本配置文件，我们需要做一些事情.

    In order to load basic configuration files as the application starts we need to do a few things.

    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 :

    如上所述，此服务基于开发模式(在这种情况下为浏览器语言)加载配置文件.如果要自定义应用程序，则根据语言加载资源可能非常有用.例如，您的意大利语发行版将具有不同的路线，不同的行为或简单的不同文字.

    As said above, this service loads configuration files based on development mode and, in this case, browser language. Loading resources based on language can be very useful if you want to customize your application. For example, your italian distribution would have different routes, different behavior or simple different texts.

    每个资源，配置和环境条目均可通过 AppConfig 服务的方法获得，例如 getEnvByKey ， getEntryByKey 和 getResourceByKey .

    Every Resources, Configuration and Enviroment entry is available trough AppConfig service's methods such as getEnvByKey, getEntryByKey and 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 构建的翻译.根据浏览器语言设置翻译.

    This module sets up translation built using ngx-translate. Sets up translation depending on the browser language.

    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;
        }
    }
    

    好吧，现在呢?如何使用这种配置?

    Ok, and now? How can I use such configuration?

    导入到 app.module.ts 中的任何模块/组件，或者导入到正在导入 translation.config.module 的另一个自定义模块中的任何模块/组件现在都可以自动进行根据浏览器语言翻译任何内插的条目.例如，使用以下代码片段将根据解释的行为生成 Welcome 或 Benvenuto :

    Any Module/Component imported into app.module.ts or any of them that is imported into another custom module that is importing translation.config.module can now automatically translate any interpolated entry based on browser language. For instance using the following snipped will generate Welcome or Benvenuto based on explained behavior:

    {{ 'TEST.WELCOME' | translate }}
    

    如果我想获得一个资源来初始化将传递给 * ngFor 的特定数组怎么办?

    What If I want to get a resource to initialize a certain array that will be passed to an *ngFor?

    在任何组件中，只需在构造函数中执行该操作即可:

    In any component, just do that inside the constructor:

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

    当然，您也可以组合资源和配置.

    Of course you can also combinate resources and configuration.

    这篇关于Angular中的字符串资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！