translatehttploader ngx ng2 example javascript json angularjs

javascript - ngx - translate in angular 5



¿Cómo mostrar traducciones usando Angular-Translate? (3)

La traducción angular en combinación con el cargador parcial solo muestra la clave y no la traducción real. He intentado todo, pero parece que no puede localizar el error. No se registran errores.

Este es mi código:

app.js

var app = angular.module(''myapp'', [ ''ngRoute'', ''appRoutes'', ''pascalprecht.translate'', ''angularTranslate'', ''HomeCtrl'' ]); angular.module(''angularTranslate'', [''pascalprecht.translate'']) .config(function($translateProvider, $translatePartialLoaderProvider ) { $translateProvider.useLoader(''$translatePartialLoader'', { urlTemplate: ''/languages/{lang}/{part}.json'' }); $translateProvider.preferredLanguage(''nl''); });

Por lo tanto, las plantillas se cargan desde /languages/{lang}/{part}.json

HomeCtrl.js

angular.module(''HomeCtrl'', []).controller(''HomeController'', function($scope, $translate, $translatePartialLoader) { $translatePartialLoader.addPart(''home''); $translate.refresh(); });

En Express tengo esta ruta para garantizar que los archivos se devuelvan en lugar de enrutarse a Angular:

app.get(''/languages/:lang/:part'', function(req, res) { res.sendFile(req.params.lang + ''/'' + req.params.part, { root: ''././languages'' }); });

casa.json

{ "HOMETITLE" : "Geweldige Whatsapp gesprekken.", }

home.html

{{ "HOMETITLE" || translate }}

Y finalmente he enlazado todo en index.html usando este orden:

<script src="../libs/angular/angular.js"></script> <script src="../libs/angular-route/angular-route.js"></script> <script src="../libs/angular-resource/angular-resource.js"></script> <script src="../libs/angular-translate/angular-translate.js"></script> <script src="../libs/angular-translate-loader-partial/angular-translate-loader-partial.js"></script> <script src="../js/controllers/HomeCtrl.js"></script> <script src="../js/appRoutes.js"></script> <script src="../js/index.js"></script>

Así que para reafirmar mi problema: solo se muestra HOMETITLE en lugar de la traducción correcta. ¡Cualquier ayuda es muy apreciada!

Como se describe en la documentación de traducción angular, debe reemplazar || con | en el archivo html:

{{ "HOMETITLE" | translate }}

En lo sucesivo, un fragmento independiente que incluye las traducciones de json:

var app = angular.module(''myapp'', [ ''pascalprecht.translate'', ''angularTranslate'', ]); angular.module(''angularTranslate'', [''pascalprecht.translate'']) .config(function($translateProvider, $translatePartialLoaderProvider ) { $translateProvider.translations(''nl'', { "HOMETITLE" : "Geweldige Whatsapp gesprekken.", }); $translateProvider.preferredLanguage(''nl''); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.7.2/angular-translate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-partial/2.7.2/angular-translate-loader-partial.min.js"></script> <html ng-app="myapp"> <body> {{ "HOMETITLE" | translate }} </body> </html>

Desde mi experiencia con la traducción angular, aquí podrían estar ocurriendo algunos problemas diferentes, lo que es difícil de precisar porque su entorno juega un factor en esto, si tuviera un representante de github que pudiera clonar, podría estar seguro.

  1. Simplemente tiene un problema de formato en su traducción como una de las otras personas ha dicho, {{"HOMETITLE" | traducir}} Aquí puede ver otras formas posibles de formatear la traducción. Me he encontrado con problemas al usar la traducción de filtro con carga parcial y externa de archivos, le recomendaría encarecidamente que si va a usar carga parcial, solo use atributos para configurar sus traducciones, como

    http://angular-translate.github.io/docs/#/guide/05_using-translate-directive

  2. Su cargador de archivos parcial se está ejecutando en una condición de carrera y está resolviendo el {{"HOMETITLE" | traducir}} antes de que realmente recupere las traducciones. Ya que puede usar traducciones predeterminadas con carga parcial, sugeriría incluir una traducción predeterminada en la configuración del proveedor de traducción para asegurarse de que ese no sea el caso. Algo tan simple como lo que algunos de los otros usuarios han descrito como

    $translateProvider.translations(''nl'', { "HOMETITLE" : "Geweldige Whatsapp gesprekken.", }); $translateProvider.preferredLanguage(''nl''); $translateProvider.forceAsyncReload(true);

Adición de translateProvider.forceAsyncReload (true); Al final de la configuración forzará una actualización. Sin embargo, le recomendaría que hiciera la traducción un poco diferente a la del archivo json para que pueda ver si ese es el caso antes de agregar la recarga forzada.

El problema se debe a una mezcla entre una construcción de lenguaje JavaScript y una expresión de interpolate cadena de plantilla AngularJS.

Considere la siguiente expresión de JavaScript:

var foo = bar || baz;

Dependiendo del valor de la bar , la bar || baz expresión bar || baz bar || baz volverá ya sea bar o baz . Cuando la bar es truthy , será devuelta; De lo contrario (cuando sea falsy ) se devolverá baz .

Dada la siguiente expresión de interpolación AngularJS: {{ "HOMETITLE" || translate }} {{ "HOMETITLE" || translate }} , la expresión se evalúa al valor "HOMETITLE" , ya que la cadena literal es veraz.

Sin embargo, el filter translate debe estar vinculado a su plantilla HTML de la siguiente manera {{ "HOMETITLE" | translate }} {{ "HOMETITLE" | translate }} . Por lo tanto, al filtro de translate se le pasará la clave ''HOMETITLE'' como argumento y debe devolver el texto requerido.