Angular 中的字符串资源

Question

我正在开发一个 Angular 应用程序，我正在寻找类似于 Android 开发中可用的 Android Resource 的东西。

下面是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>

你知道我可以安装的方法或插件吗？

原文由 smartmouse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将配置、翻译和资源与应用程序的逻辑分开是非常有用的。配置在其他上下文中也非常有帮助，例如，获取 api_url 对任何 rest 调用都有用。

您可以使用 @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"
}

例如 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 ：配置服务，根据开发模式加载资源。我将在下面展示一个片段。

基本配置：

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

应用程序模块.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 { }

应用程序配置文件：

如上所述，此服务根据开发模式加载配置文件，在本例中为浏览器语言。如果您想自定义您的应用程序，基于语言加载资源会非常有用。例如，您的意大利发行版会有不同的路线、不同的行为或简单的不同文本。

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

}

翻译.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 现在可以根据浏览器语言自动翻译任何内插条目。例如，使用以下片段将根据解释的行为生成 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');
 }

当然你也可以结合资源和配置。

原文由 AndreaM16 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

AndreaM16 的回答绝对是彻底的，但您也应该考虑为此使用现有的包，而不是编写您自己需要维护的自定义代码。为此，我建议检查 ngx-translate （在该答案的幕后使用）、 transloco 和 Angular 的内置 i18n 功能。

这些方法中的大多数都基于 神奇的字符串，您的 HTML 模板和打字稿代码需要包含（希望）与 JSON 或 XML 文件中的键匹配的字符串。这提出了一个严重的代码维护问题，它不会在编译时显示出来，只会在运行时显示出来。我还提倡查看一些关于创建类型安全翻译系统的指南：

• https://medium.com/angular-in-depth/angular-typed-translations-29353f0a60bc
• https://medium.com/angular-in-depth/dynamic-import-of-locales-in-angular-b994d3c07197

原文由 RocketMan 发布，翻译遵循 CC BY-SA 4.0 许可协议