Si estás desarrollando sitios web, probablemente estés escribiendo mucho texto en las plantillas de componentes:

Escribir texto como este no está roto ni tiene errores, sino que es más bien tedioso de mantener para proyectos de larga duración. Para mejorar esto, puedes crear un archivo que contenga todo el texto de una característica particular y reutilizarlo en toda la aplicación importando las claves correctas.

Este archivo puede ser:

• Archivo JSON
• Archivo TypeScript

Describiré los pros y los contras de ambos enfoques.

I) Archivo de traducciones JSON

(1) Crear un archivo JSON

En el directorio raíz de tu proyecto, ve a src/assets y crea una nueva carpeta (wording) y un archivo JSON (wording.json):

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

Y agrega tus traducciones:

{
  "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) Actualizar TSConfig

Si es necesario, agregue resolveJsonModule: true a las opciones del compilador tsconfig.json para permitir la importación de archivos JSON a módulos ECMAScript:

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

(3) Utilice el archivo JSON

Importar el archivo directamente al componente

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

}

O crea un servicio que importe todo el texto globalmente:

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

}

Y luego inyecta el servicio en tu componente.

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

  public pageText!: any;

  constructor(private readonly translationsService: TranslationsService) {}

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

}

Sin embargo, la desventaja de este enfoque es que no tienes ningún sentido inteligente para el contenido del texto.

  

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

Para resolver esto, tendrías que crear un tipo personalizado o una interfaz alrededor de todo el archivo wording.json o el objeto particular ("Batman") que estás usando en el componente.

II) Archivo de traducciones de TypeScript

Otra forma de hacer esto es deshacerse del archivo JSON y crear un archivo Typecript en su lugar.

(1)

Crear un nuevo archivo wording.ts en cualquier lugar de 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) Cree una clase que lea este archivo

Puedes importar un nuevo archivo wordings.ts en cualquier componente que desees. Sin embargo, me gusta crear una clase personalizada (UseWording) que lea este archivo.

// use-wording.ts

import WORDING from './wording';

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

  get useWording() {
    return WORDING
  }
}

(3) Ineritar la clase UseWording en sus componentes

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

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

Con esto, puedes ver inmediatamente el intellisense en la plantilla.

Además, puede crear más propiedades de clase dirigidas a claves específicas en el objeto de redacción:

@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 }}
      
    
  

Tenga en cuenta que si su componente de clase inyecta dependencias a través del constructor, el constructor debe contener una llamada 'super'.

export class MyComponent extends UseWording {

  searchAccountsForm!: FormGroup;

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



Y al igual que con JSON, si necesitas cambiar un título o una descripción, lo haces en un solo lugar (wording.ts) en lugar de cambiar varios archivos/componentes.


  
  
  Concluyendo


Este artículo demuestra dos formas de utilizar la redacción en componentes Angular. Ambos métodos tienen ventajas y desventajas.

El uso del archivo TypeScript acelera las cosas y cuida el intellisense, pero puede que no sea adecuado para trabajar con varios idiomas.

Usar el archivo JSON requiere algo de trabajo adicional, pero es beneficioso cuando las traducciones exactas se usan en varias aplicaciones creadas con diferentes tecnologías (que admiten el formato JSON).

Si aprendiste algo nuevo, no olvides presionar el botón de seguir. Además, sígueme en Twitter para mantenerte actualizado con mi próximo contenido.

¿Adiós por ahora?