javascript （原始）使用Ngx-Translate进行角度定位（vs. Angular i18n）

Posted 2021-05-03

// SETUP

//angular 6
`npm install @ngx-translate/core @ngx-translate/http-loader --save`
//angular 5
`npm install @ngx-translate/core@9.1.1 @ngx-translate/http-loader@2.0.1 --save`

// configure the 'TranslateModule' for loading the i18n files where the translated content is located.

// app.module.ts
//...
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

import {AppComponent} from './app';
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// This would load the translations from /assets/i18n/<locale-code>.json. <locale-code> is the placeholder for all the languages you provide.

// initializes the TranslationService: tell the app what the default language should be (will be used in cases where no translation in the target language exists).
// app.component.ts
export class AppComponent {
  param = {value: 'world'};
  constructor(translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }
}
// Your app is now ready for i18n. 
// for AOT: https://github.com/ngx-translate/core

// EXTRACT YOUR UNLOCALIZED CONTENT
// Plugin that can extract every translatable content and save it as JSON or Gettext pot files:
// https://github.com/biesbjerg/ngx-translate-extract


// TRANSLATE THE CONTENT
// ngx-translate provides three ways to localize the content.:

// 1) TranslationService: for services and controllers
translate.get('my_meaningful_id').subscribe((res: string) => { ... });
// 2) TranslatePipe: for html templates
{{ 'my_meaningful_id' | translate }}
// 3) TranslateDirective: alternative for your html templates
`<div translate>my_meaningful_id</div>`
// Localizing single attributes of an HTML tag is not possible. You need to set up the whole tag as a translation using the innerHTML attribute:
`<h1 [innerHTML]="'key_id_with_html_content' | translate"></h1>`

// PLACEHOLDERS
// Placeholders can be filled in by simply passing a hash when inserting:
// in your code
translate.get('my_meaningful_id', { placeholder_name: value }).subscribe((res: string) => {
    //...
});
// in your component
params = { placeholder_name: value }
// in your view
`{{ 'my_meaningful_id' | translate:params }}`
`<div translate="my_meaningful_id" translateParams="{ placeholder_name: value }">my_meaningful_id</div>`

// PLURALIZATION
// Pluralization doesn’t work out of the box. You need to use the i18nPluralPipe (https://angular.io/api/common/I18nPluralPipe) from the Angular API to solve this. More info:https://github.com/ngx-translate/core/issues/150
// There is also a plugin for using the ICU message format: https://github.com/lephyrus/ngx-translate-messageformat-compiler

// AUTOMATE WORKFLOW
// Very easy to integrate PhraseApp (https://phraseapp.com/es) into your build flow
// To use this configuration, you only need to install our CLI Tool and create a config in your project.
// Then simply add the PhraseApp pull command into your scripts in the package.json:
"scripts": { 
  "ng": "ng", 
  "start": "ng serve",
  "build": "phraseapp pull && ng build", // added phraseapp pull in order to always have up-to-date translations before releasing a new version.
  "localize": "phraseapp push", // will push all translations to PhraseApp where the content can be translated by your translators or you can order translations
  "test": "ng test", 
  "lint": "ng lint", 
  "e2e": "ng e2e" 
}
// There are some actions we need to implement.
// The first one is:
`npm localize` 
// The second action is:
`npm build`