Si vous développez des sites Web, vous écrivez probablement beaucoup de texte dans les modèles de composants :

Écrire un texte comme celui-ci n'est ni cassé ni bogué, mais plutôt fastidieux à maintenir pour des projets de longue durée. Pour améliorer cela, vous pouvez créer un fichier contenant tout le texte d'une fonctionnalité particulière et le réutiliser dans toute l'application en important les clés appropriées.

Ce fichier peut être :

• Fichier JSON
• Fichier TypeScript

Je décrirai les avantages et les inconvénients des deux approches.

I) Fichier de traductions JSON

(1) Créer un fichier JSON

Dans le répertoire racine de votre projet, allez dans src/assets et créez un nouveau dossier (wording) et un fichier JSON (wording.json) :

? src 
|__ ? assets
|_____ ? wording
|_______ wording.json

Et ajoutez vos traductions :

{
  "APP": {
    "TITLE": "Movies App",
    "DESCRIPTION": "The best site for movies"
  },
  "COMMON": {
    "BUTTON": "Peek In"
  },
  "MOVIES": {
    "BATMAN": {
      "TITLE": "Batman",
      "SERIES": {
        "THE_DARK_KNIGHT": {
          "TITLE": "The Dark Knight Series",
          "MOVIES": {
            "BATMAN_BEGINS": {
              "TITLE": "Batman Begins",
              "DESCRIPTION": "Bruce learns the art of fighting to confront injustice."
            },
            "THE_DARK_KNIGHT": {
              "TITLE": "The Dark Knight",
              "DESCRIPTION": "Lorem Ipsum"
            },
            "THE_DARK_KNIGHT_RISES": {
              "TITLE": "The Dark Knight Rises",
              "DESCRIPTION": "Lorem Ipsum"
            }
          }
        }
      }

    }
  }
}

(2) Mettre à jour TSConfig

Si nécessaire, ajoutez solveJsonModule: true aux options du compilateur tsconfig.json pour autoriser l'importation de fichiers JSON dans les modules ECMAScript :

{
  "compilerOptions": {
    "resolveJsonModule": true, // Add this line to tsconfig.json
  }
}

(3) Utilisez le fichier JSON

Importer le fichier directement dans le composant

// component file
import wording from '../../assets/wording/wording.json';

@Component({...}) 
export class HomeComponent implements OnInit {

  public pageText!: any;

  ngOnInit(): void {
    this.pageText = wording.MOVIES.BATMAN;
  }

}

Ou créez un service qui importe tous les mots globalement :

// translations.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TranslationsService {

  public wording!: any;

  constructor(private http: HttpClient) {
    this.setTranslations();
  }

  private setTranslations() {
    this.http.get('./assets/wording/wording.json').subscribe(data => {
      this.wording = data;
     });
  }

}

Et puis injectez le service dans votre composant.

@Component({...}) 
export class HomeComponent implements OnInit {

  public pageText!: any;

  constructor(private readonly translationsService: TranslationsService) {}

  ngOnInit(): void {
    this.pageText = this.translationsService.wording.MOVIES.BATMAN;
  }

}

Cependant, l'inconvénient de cette approche est que vous ne disposez d'aucune intelligence pour le contenu du texte.

  

    {{ pageText.TITLE }}
    
    
{{ pageText.HELLO_WORLD }}
  

Pour résoudre ce problème, vous devrez créer un type personnalisé ou une interface autour de l'ensemble du fichier wording.json ou de l'objet particulier ("Batman") que vous utilisez dans le composant.

II) Fichier de traductions TypeScript

Une autre façon de procéder consiste à abandonner le fichier JSON et à créer un fichier Typescript à la place.

(1)

Créez un nouveau fichier wording.ts n'importe où dans le src/app

// wording.ts
const WORDING = {
  APP: {
    TITLE: 'Movies App',
    DESCRIPTION: 'The best site for movies',
  },
  COMMON: {
    BUTTON: 'Peek In',
  },
  MOVIES: {
    BATMAN: {
      TITLE: 'Batman',
      SERIES: {
        THE_DARK_KNIGHT: {
          TITLE: 'The Dark Knight Series',
          MOVIES: {
            BATMAN_BEGINS: {
              TITLE: 'Batman Begins',
              DESCRIPTION:
                'Bruce learns the art of fighting to confront injustice.',
            },
            THE_DARK_KNIGHT: {
              TITLE: 'The Dark Knight',
              DESCRIPTION: 'Lorem Ipsum',
            },
            THE_DARK_KNIGHT_RISES: {
              TITLE: 'The Dark Knight Rises',
              DESCRIPTION: 'Lorem Ipsum',
            },
          },
        },
      },
    },
  },
};

export default WORDING;

(2) Créez une classe qui lit à partir de ce fichier

Vous pouvez importer un nouveau fichier wordings.ts dans n'importe quel composant de votre choix. Cependant, j'aime créer une classe personnalisée (UseWording) qui lit ce fichier.

// use-wording.ts

import WORDING from './wording';

/**
 * Wrapper for translation wording
 */
export default class UseWording {

  get useWording() {
    return WORDING
  }
}

(3) Inerisez la classe UseWording dans vos composants

import { Component } from '@angular/core';
import UseWording from '../../../shared/translations/use-wording';

@Component({...})
export class HomeComponent extends UseWording {
  readonly pageText = this.useWording.MOVIES.BATMAN
}

Grâce à cela, vous pouvez immédiatement voir l'intellisense dans le modèle.

De plus, vous pouvez créer davantage de propriétés de classe qui ciblent des clés spécifiques dans l'objet de formulation :

@Component({...})
export class HomeComponent extends UseWording {
  readonly pageText = this.useWording.MOVIES.BATMAN;
  readonly movies = this.useWording.MOVIES.BATMAN.SERIES.THE_DARK_KNIGHT.MOVIES;
  readonly common = this.useWording.COMMON;
}

  

    {{ pageText.TITLE }}
    
{{ pageText.SERIES.THE_DARK_KNIGHT.TITLE }}
  

  

    

      
{{ movies.BATMAN_BEGINS.TITLE }}
      

        {{ movies.BATMAN_BEGINS.DESCRIPTION }}
      
      {{ common.BUTTON }}
    
    

      
{{ movies.THE_DARK_KNIGHT.TITLE }}
      

        {{ movies.THE_DARK_KNIGHT.DESCRIPTION }}
      
      {{ common.BUTTON }}
    
    

      

        {{ movies.THE_DARK_KNIGHT_RISES.TITLE }}
        

          {{ movies.THE_DARK_KNIGHT_RISES.DESCRIPTION }}
        
        {{ common.BUTTON }}
      
    
  

Notez que si votre composant de classe injecte des dépendances via le constructeur, le constructeur doit contenir un « super » appel.

export class MyComponent extends UseWording {

  searchAccountsForm!: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {
    super(); // 



Et tout comme avec JSON, si vous devez modifier un titre ou une description, vous le faites au même endroit (wording.ts) au lieu de modifier plusieurs fichiers/composants.


  
  
  Conclusion


Cet article montre deux façons d'utiliser le libellé dans les composants angulaires. Les deux méthodes présentent des avantages et des inconvénients.

L'utilisation du fichier TypeScript accélère les choses et prend en charge l'intellisense, mais il peut ne pas convenir au travail avec plusieurs langues.

L'utilisation du fichier JSON nécessite un travail supplémentaire, mais elle est bénéfique lorsque les traductions exactes sont utilisées dans diverses applications créées avec différentes technologies (qui prennent en charge le format JSON).

Si vous avez appris quelque chose de nouveau, n'oubliez pas d'appuyer sur le bouton Suivre. Suivez-moi également sur Twitter pour rester informé de mon contenu à venir.

Au revoir pour l'instant ?