web-dev-qa-db-ja.com

Angularの文字列リソース

私はAngularアプリを開発しています。Android Android開発で利用可能なリソースです。

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>

それに到達するためにインストールできる方法またはアドオンを知っていますか？

htmlstringangularpipe
10
smartmouse

アプリケーションのロジックから分離された構成、変換、リソースを持つことは非常に便利です。設定は、たとえば、api_urlを残りの呼び出しに使用するなど、他のコンテキストでも非常に役立ちます。

そのようなものは @ 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：任意のコンポーネントで使用できるテキストリソースが含まれています。カバーする言語ごとに1つあります。

例えば。 en.json：

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

E.G it.json：

{
  "TEST": {
    "WELCOME"  : "Benvenuto"
}
  • assets/json-config：開発モードと本番モードで使用する構成ファイルが含まれています。現在の開発モードを示すjsonであるenv.jsonも含まれています。

例えば。 env.json：

{
   "env" : "development"
}

例えば。 development.json：

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

  • assets/resources：対象とする各言語ごとのリソースのjsonファイルが含まれています。たとえば、アプリケーションモデルのjson初期化が含まれている場合があります。たとえば、環境や言語に基づいてパーソナライズされた*ngForに渡されるモデルの配列を入力する場合に便利です。このような初期化は、後で説明するAppConfig.getResourceByKeyを介して正確なリソースにアクセスする必要がある各コンポーネント内で行う必要があります。

  • app.config.ts：開発モードに基づいてリソースをロードする構成サービス。以下にスニペットを示します。

基本構成：

アプリケーションの起動時に基本構成ファイルをロードするには、いくつかのことを行う必要があります。

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：

上記のように、このサービスは開発モード、この場合はブラウザ言語に基づいて構成ファイルをロードします。言語に基づいてリソースをロードすることは、アプリケーションをカスタマイズする場合に非常に役立ちます。たとえば、イタリア語の配布には、異なるルート、異なる動作、または単純な異なるテキストがあります。

すべてのリソース、構成、および環境エントリは、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');
 }

もちろん、リソースと構成を組み合わせることもできます。

14
AndreaM16