web-dev-qa-db-fra.com

Angular 6 Localisation CLI et Internationalisation pour support multilingue

Nous utilisons Angular 6 dans notre application. Dans cette application, nous voulons fournir un support multilingue.

Comment pouvons-nous implémenter la localisation et l'internationalisation dans angular 6? Its an angular 6 version.

angulartypescriptlocalizationinternationalizationangular6
10
Dinesh Ghule

Traduire Angular 6 applications avec ngx-translate Ce que nous ferons:

Créer un projet Angular6 minimal Installer et charger ngx-translate Initier le TranslateService Créer des fichiers de traduction .json Traduire un titre et une introduction simples Intégrer un sélecteur de langue Traduire une phrase avec une variable

Utilisation d'objets .json imbriqués

Créer un projet Angular6 minimal

Nous utilisons @ angular/cli pour créer un nouveau projet nommé "traduction" dans le terminal:

ng new traduction --prefix tr
cd traduction
ng serve -o

Installer et charger ngx-translate

Utilisez npm dans votre terminal dans le dossier de projet "traduction":

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader

Remarque: utilisez les versions suivantes pour ci-dessous angular 6

"@ngx-translate/core": "^9.1.1" 
"@ngx-translate/http-loader": "^3.0.1"

et pour angular 5 utilisez la dernière version 10 et supérieure)

Importez les modules nécessaires dans app.module.ts:

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

Ajoutez une fonction, qui renvoie un "TranslateHttpLoader" et exportez-le (requis par AoT). Dans ce cas, la fonction HttpLoaderFactory que nous créons, renvoie un objet qui peut charger des traductions à l'aide de Http et .json, mais vous pouvez écrire votre propre classe qui, par exemple, utilise une variable JavaScript globale au lieu de charger un fichier, ou qui utilise Google Translate:

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

OR

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

Nous devons ensuite importer nos modules dans le @NgModule, c'est l'importation qui indique Angular pour charger ce module dans votre AppModule:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Injectez le TranslateService

Dans "app.component.ts", nous lançons maintenant le "TranslateService", nous importons le TranslateService:

import { TranslateService } from '@ngx-translate/core';

Ensuite, à l'intérieur de la classe AppComponent, nous injectons le service et définissons notre langue par défaut. Et pour être prêt pour la prochaine étape, nous ajoutons une fonction pour changer de langue.

constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
  }

  switchLanguage(language: string) {
    this.translate.use(language);
  }

Créer des fichiers de traduction .json

Nous créons maintenant nos fichiers de traduction dans le dossier assets/i18n:

src/assets/i18n/en.json

{
    "Title": "Translation example",
    "Intro": "Hello I am Arthur, I am 42 years old."
}

src/assets/i18n/fr.json

{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle Arthur, j'ai 42 ans."
}

Ce sont de simples fichiers .json qui seront chargés par notre "TranslateHttpLoader" que nous avons créé dans "app.module.ts".

Traduire le titre et l'intro simples

Dans app.component.html, nous ajoutons un en-tête avec la traduction "directive" à l'intérieur de la balise "h1". Cette directive prendra le texte à l'intérieur de la balise et le remplacera par la traduction correspondante. Si vous utilisez la directive, vous devez vous assurer qu'il n'y a rien d'autre à l'intérieur de la balise que le texte.

Comme deuxième exemple, nous utilisons le "TranslationPipe" pour traduire une étiquette avec define en tant que chaîne en ligne. Comme nous avons parfois de la valeur à l'intérieur d'une traduction que nous voulons remplacer, nous pouvons passer un objet de données dans le canal de traduction.

<h1 translate>Title</h1>

<div>
  {{ 'Intro' | translate:user }}
</div>

Intégrer le sélecteur de langue

Nous pouvons maintenant attacher notre fonction de changement de langue que nous avons vu ci-dessus dans app.component.ts à un bouton. Dans ce cas, nous créons un bouton pour chaque langue et appelons la fonction switchLanguage () avec la clé de langue correspondante.

<button (click)="switchLanguage('en')">en</button>

<button (click)="switchLanguage('fr')">fr</button>

Traduire la phrase avec une variable

Comme mentionné précédemment, vous avez parfois des phrases contenant une variable. Dans ce petit exemple, nous avons un objet utilisateur avec l'âge et le nom dans le "app.component.ts", et nous voulons traduire une phrase qui contiendra ces valeurs:

...
export class AppComponent {
  user = {
    name: 'Arthur',
    age: 42
  };
...
}

Étant donné que nous passons cet objet dans le tube "translate", nous pouvons désormais utiliser ses propriétés dans notre traduction avec la notation {{placeholder}}.

src/assets/i18n/en.json

{
    "Title": "Translation example",
    "Intro": "Hello I am {{name}}, I am {{age}} years old."
}

src/assets/i18n/fr.json

{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans."
}

tilisation d'objets .json imbriqués

Si vous voulez avoir plus de contrôle sur votre traduction, et par exemple traduire des blocs de page (du point de vue de l'utilisateur final) ou des composants (du point de vue du développeur), une solution pourrait être la suivante; utilisez des objets .json imbriqués comme décrit dans le dépôt git. Un exemple pourrait ressembler à ceci dans les fichiers -json:

{
    "Title": "Translation example",
    "Intro": "Hello I am {{name}}, I am {{age}} years old.",
    "Startpage": {
        "TranslationSections": "Hello World"
    },
     "Aboutpage": {
        "TranslationSections": "We are letsboot"
    }
}


{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
    "Startpage": {
        "TranslationSections": "Bonjour Monde"
    },
    "Aboutpage": {
        "TranslationSections": "Nous sommes letsboot"
    }
}

Et dans le modèle correspondant:

<h1 translate>Title</h1>

<div>
  {{ 'Intro' | translate:user }}
</div>

<div>
  {{ 'Startpage.TranslationSections' | translate }}
</div>

<div>
  {{ 'Aboutpage.TranslationSections' | translate }}
</div>

<br/>

<button (click)="switchLanguage('en')">en</button>
<button (click)="switchLanguage('fr')">fr</button>
24
Dinesh Ghule

component.module.ts 

export function translateHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })

classe LanguagService.ts 

import { Injectable } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { ReplaySubject } from 'rxjs';
import { take } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class LanguageService {
    language$ = new ReplaySubject<LangChangeEvent>(1);
    translate = this.translateService;
    // 國旗對照;

    constructor(private translateService: TranslateService) {}

    setInitState() {
      this.translateService.addLangs(['en', 'cn','vi']);
      console.log( 'Browser Lang', this.translate.getBrowserLang());
      const browserLang = (this.translate.getBrowserLang().includes('vi')) ? 'vi' : 'cn'  ;
      console.log("anhtt "," anguage  = " +browserLang);

      this.setLang(browserLang);
    }

    setLang(lang: string) {
      this.translateService.onLangChange.pipe(take(1)).subscribe(result => {
        this.language$.next(result);
      });
      this.translateService.use(lang);

    }
  }

app.component.html 

<h1>How to multi language in angular 7</h1>
<p >{{'content' |translate}}</p>
<h4 translate>
  {{'message' |translate}}
</h4>
<button (click)="selectLanguageEN()">English</button>
<button (click)="selectLanguageCN()">中國</button>
<button (click)="selectLanguageVI()">Viet Nam</button>

Démo du code:

https://tienanhvn.blogspot.com/2019/06/angular-7-how-to-multi-language.html

0
Tienanhvn