Se você estiver desenvolvendo sites, provavelmente estará escrevendo muito texto nos modelos de componentes:

Escrever um texto como este não é quebrado ou cheio de bugs, mas sim cansativo de manter para projetos de longa duração. Para melhorar isso, você pode criar um arquivo contendo todo o texto de um recurso específico e reutilizá-lo em todo o aplicativo importando as chaves corretas.

Este arquivo pode ser:

• Arquivo JSON
• Arquivo TypeScript

Descreverei os prós e os contras de ambas as abordagens.

I) Arquivo de traduções JSON

(1) Crie um arquivo JSON

No diretório raiz do seu projeto, vá para src/assets e crie uma nova pasta (wording) e um arquivo JSON (wording.json):

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

E adicione suas traduções:

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

Se necessário, adicione resolveJsonModule: true a tsconfig.json compilerOptions para permitir a importação de arquivos JSON para módulos ECMAScript:

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

(3) Use o arquivo JSON

Importe o arquivo diretamente para o 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;
  }

}

Ou crie um serviço que importe todo o 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;
     });
  }

}

E então injete o serviço em seu componente.

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

  public pageText!: any;

  constructor(private readonly translationsService: TranslationsService) {}

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

}

No entanto, a desvantagem dessa abordagem é que você não tem nenhum senso intelectual para o conteúdo do texto.

  

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

Para resolver isso, você teria que construir um tipo personalizado ou uma interface em torno de todo o arquivo wording.json ou do objeto específico ("Batman") que você está usando no componente.

II) Arquivo de traduções TypeScript

Outra maneira de fazer isso é abandonar o arquivo JSON e criar um arquivo Typescript.

(1)

Crie um novo arquivo wording.ts em qualquer lugar do 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) Crie uma classe que leia este arquivo

Você pode importar um novo arquivo wordings.ts em qualquer componente desejado. No entanto, gosto de criar uma classe personalizada (UseWording) que lê este arquivo.

// use-wording.ts

import WORDING from './wording';

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

  get useWording() {
    return WORDING
  }
}

(3) Inerir a classe UseWording em seus 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
}

Com isso, você pode ver imediatamente o intellisense no modelo.

Além disso, você pode criar mais propriedades de classe direcionadas a chaves específicas no objeto de texto:

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

Observe que se o seu componente de classe injeta dependências por meio do construtor, o construtor deve conter uma chamada 'super'.

export class MyComponent extends UseWording {

  searchAccountsForm!: FormGroup;

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



E assim como com JSON, se você precisar alterar um título ou uma descrição, faça isso em um só lugar (wording.ts) em vez de alterar vários arquivos/componentes.


  
  
  Concluindo


Este artigo demonstra duas maneiras de usar palavras em componentes Angular. Ambos os métodos têm vantagens e desvantagens.

Usar o arquivo TypeScript acelera as coisas e cuida do intellisense, mas pode não ser adequado para trabalhar com vários idiomas.

Usar o arquivo JSON requer algum trabalho extra, mas é benéfico quando as traduções exatas são usadas em vários aplicativos criados com tecnologias diferentes (que suportam o formato JSON).

Se você aprendeu algo novo, não se esqueça de clicar no botão seguir. Além disso, siga-me no Twitter para ficar atualizado com meu próximo conteúdo.

Adeus por agora ?