multi - i18n angular 5

¿Cómo proporcionar un enlace de idioma i18n alternativo en Angular sin una compilación?

Question

Actualmente estoy trabajando en i18n de mi aplicación angular. Utilizo AOT compilando con archivos xlf para crear aplicaciones pre compiladas como se describe aquí . En la compilación, proporciono un href base específico del lenguaje (utilizando el --base-href ). Por ejemplo, esto significa que termino con dos aplicaciones específicas del idioma usando las siguientes rutas url:

• / app_path / en / ...
• / app_path / de / ...

Ahora deseo proporcionar un enlace al idioma alternativo respectivo dentro de mi aplicación reemplazando, por ejemplo, en por de en en la url activa. Utilicé la inyección del enrutador, así que puedo acceder a su propiedad de URL, pero esta propiedad no me proporciona la URL completa, incluido el href base.

¿Cómo puedo averiguar la URL base desde dentro de una aplicación angular?

Alternativamente, ¿hay alguna manera de averiguar el idioma para el que se creó la aplicación? ¿Puedo acceder a la propiedad del idioma de destino desde los archivos xliff de alguna manera?

Answer 1

Cuando compila su aplicación para los distintos idiomas, establece la configuración regional en el proceso de compilación ng:

./node_modules/.bin/ngc --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf

Puede obtener acceso a esta configuración regional inyectándola en su componente:

import { Inject, LOCALE_ID } from ''@angular/core'';
...
constructor(@Inject(LOCALE_ID) locale: string, ...

Luego puede usar la cadena de configuración regional para determinar el idioma actual. En el ejemplo anterior, la configuración regional se estableció en "es"

Espero que esto ayude

Answer 2

Primero, deje que Angular inyecte los objetos de enrutador y ubicación (no estoy seguro de por qué se necesita el enrutador):

constructor(private router: Router, private location: Location) {}

Luego, para determinar la ruta base (base href):

let fullpath = this.location.prepareExternalUrl(this.location.path());
let basepath = fullpath.substr(0, fullpath.lastIndexOf(this.location.path().substr(1)));

Finalmente, así es como puedes crear una lista de URL de idiomas alternativos (en urls ):

const languages = ["en", "de", "fr", "it"];  // List of available languages 
let urls = [];
for (let lang of languages) {
  let url = basepath.replace(///(..)//$/, "/" + lang + "/") + this.location.path().substr(1);
  if (url !== fullpath) {
    urls.push(url);
  }
}

Tenga en cuenta que basepath.replace asume un código de idioma de dos caracteres entre barras. Esto no funcionará para algo como "en-us" que requeriría una expresión regular ligeramente mejorada. Todavía no he encontrado una manera de identificar el idioma de la aplicación que se está ejecutando actualmente.