Richtige Verwendung für Winkelübersetzung in Steuerungen

Ich verwende Angular -Translate für i18n in einer AngularJS-Anwendung.

Für jede Anwendungsansicht gibt es einen dedizierten Controller. In den folgenden Controllern habe ich den Wert festgelegt, der als Seitentitel angezeigt werden soll.

Code

HTML

<h1>{{ pageTitle }}</h1>

JavaScript

.controller('FirstPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.pageTitle = $filter('translate')('HELLO_WORLD');
    }])

.controller('SecondPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.pageTitle = 'Second page title';
    }])

Ich lade die Übersetzungsdateien mit der Erweiterung angle-translate-loader-url .

Problem

Beim ersten Laden der Seite wird der Übersetzungsschlüssel anstelle der Übersetzung für diesen Schlüssel angezeigt. Die Übersetzung ist Hello, World!, aber ich sehe HELLO_WORLD.

Wenn ich zum zweiten Mal auf die Seite gehe, ist alles in Ordnung und die übersetzte Version wird angezeigt.

Ich gehe davon aus, dass das Problem damit zusammenhängt, dass die Übersetzungsdatei möglicherweise noch nicht geladen ist, wenn der Controller den Wert zuweist $scope.pageTitle.

Anmerkung

Bei Verwendung von <h1>{{ pageTitle | translate }}</h1>und $scope.pageTitle = 'HELLO_WORLD';funktioniert die Übersetzung vom ersten Mal an perfekt. Das Problem dabei ist, dass ich nicht immer Übersetzungen verwenden möchte (z. B. für den zweiten Controller möchte ich nur eine rohe Zeichenfolge übergeben).

Frage

Ist dies ein bekanntes Problem / eine Einschränkung? Wie kann das gelöst werden?

EDIT : Eine bessere Lösung finden Sie in der Antwort von PascalPrecht (dem Autor von Angular-Translate).

Die asynchrone Art des Ladens verursacht das Problem. Sie sehen, mit {{ pageTitle | translate }}, Angular wird den Ausdruck beobachten; Wenn die Lokalisierungsdaten geladen werden, ändert sich der Wert des Ausdrucks und der Bildschirm wird aktualisiert.

Sie können das also selbst tun:

.controller('FirstPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.$watch(
        function() { return $filter('translate')('HELLO_WORLD'); },
        function(newval) { $scope.pageTitle = newval; }
    );
});

Dadurch wird jedoch der beobachtete Ausdruck bei jedem Digest-Zyklus ausgeführt. Dies ist nicht optimal und kann zu einer sichtbaren Leistungsverschlechterung führen oder auch nicht. Wie auch immer, Angular macht es, also kann es nicht so schlimm sein ...

Empfohlen: Nicht im Controller übersetzen, sondern in Ihrer Ansicht übersetzen

Ich würde empfehlen, Ihren Controller frei von Übersetzungslogik zu halten und Ihre Zeichenfolgen wie folgt direkt in Ihre Ansicht zu übersetzen:

<h1>{{ 'TITLE.HELLO_WORLD' | translate }}</h1>

Nutzung des bereitgestellten Dienstes

Angular Translate bietet den $translateDienst, den Sie in Ihren Controllern verwenden können.

Eine beispielhafte Verwendung des $translateDienstes kann sein:

.controller('TranslateMe', ['$scope', '$translate', function ($scope, $translate) {
    $translate('PAGE.TITLE')
        .then(function (translatedValue) {
            $scope.pageTitle = translatedValue;
        });
});

Der Übersetzungsdienst verfügt auch über eine Methode zum direkten Übersetzen von Zeichenfolgen, ohne dass ein Versprechen eingegangen werden muss $translate.instant().

.controller('TranslateMe', ['$scope', '$translate', function ($scope, $translate) {
    $scope.pageTitle = $translate.instant('TITLE.DASHBOARD'); // Assuming TITLE.DASHBOARD is defined
});

Der Nachteil bei der Verwendung $translate.instant()kann sein, dass die Sprachdatei noch nicht geladen ist, wenn Sie sie asynchron laden.

Verwendung des mitgelieferten Filters

Dies ist mein bevorzugter Weg, da ich Versprechen nicht auf diese Weise behandeln muss. Die Ausgabe des Filters kann direkt auf eine Bereichsvariable gesetzt werden.

.controller('TranslateMe', ['$scope', '$filter', function ($scope, $filter) {
    var $translate = $filter('translate');

    $scope.pageTitle = $translate('TITLE.DASHBOARD'); // Assuming TITLE.DASHBOARD is defined
});

Verwendung der bereitgestellten Richtlinie

Da @PascalPrecht der Schöpfer dieser großartigen Bibliothek ist, würde ich empfehlen, seinen Rat zu befolgen (siehe seine Antwort unten) und die bereitgestellte Direktive zu verwenden, die Übersetzungen sehr intelligent zu handhaben scheint.

Die Direktive kümmert sich um die asynchrone Ausführung und ist auch clever genug, um Übersetzungs-IDs im Bereich zu entfernen, wenn die Übersetzung keine dynamischen Werte enthält.

Eigentlich sollten Sie stattdessen die Übersetzungsanweisung für solche Dinge verwenden.

<h1 translate="{{pageTitle}}"></h1>

Die Direktive kümmert sich um die asynchrone Ausführung und ist auch clever genug, um Übersetzungs-IDs im Bereich zu entfernen, wenn die Übersetzung keine dynamischen Werte enthält.

Wenn es jedoch um keine Möglichkeit gibt , und Sie wirklich haben , um den Einsatz $translateService in der Steuerung, sollten Sie den Anruf in einem Wrap - $translateChangeSuccessEreignis mit $rootScopein Kombination mit $translate.instant()wie folgt aus :

.controller('foo', function ($rootScope, $scope, $translate) {
  $rootScope.$on('$translateChangeSuccess', function () {
    $scope.pageTitle = $translate.instant('PAGE.TITLE');
  });
})

Warum also $rootScopenicht $scope? Der Grund dafür ist, dass in Winkel übersetzen die Ereignisse werden $emitauf ed $rootScopestatt $broadcasted auf , $scopeweil wir auf Sendung durch den gesamten Umfang Hierarchie nicht brauchen.

Warum $translate.instant()und nicht nur asynchron $translate()? Wenn ein $translateChangeSuccessEreignis ausgelöst wird, ist sicher, dass die erforderlichen Übersetzungsdaten vorhanden sind und keine asynchrone Ausführung stattfindet (z. B. asynchrone Loader-Ausführung). Daher können wir nur das verwenden, $translate.instant()das synchron ist und nur davon ausgeht, dass Übersetzungen verfügbar sind.

Seit Version 2.8.0 gibt es auch $translate.onReady()ein Versprechen, das aufgelöst wird, sobald die Übersetzungen fertig sind. Siehe das Änderungsprotokoll .

Um eine Übersetzung im Controller zu erstellen, können Sie den folgenden $translateDienst verwenden:

$translate(['COMMON.SI', 'COMMON.NO']).then(function (translations) {
    vm.si = translations['COMMON.SI'];
    vm.no = translations['COMMON.NO'];
});

Diese Anweisung führt nur die Übersetzung bei der Controller-Aktivierung durch, erkennt jedoch nicht die Laufzeitänderung in der Sprache. Um dieses Verhalten zu erreichen, können Sie das $rootScopeEreignis anhören $translateChangeSuccessund dort dieselbe Übersetzung durchführen:

    $rootScope.$on('$translateChangeSuccess', function () {
        $translate(['COMMON.SI', 'COMMON.NO']).then(function (translations) {
            vm.si = translations['COMMON.SI'];
            vm.no = translations['COMMON.NO'];
        });
    });

Natürlich können Sie den $translateDienst in eine Methode einkapseln und im Controller und im $translateChangeSucessListener aufrufen .

Was passiert ist, dass Angular-translate den Ausdruck mit einem ereignisbasierten System überwacht, und genau wie in jedem anderen Fall der Bindung oder bidirektionalen Bindung wird ein Ereignis ausgelöst, wenn die Daten abgerufen werden, und der Wert wird geändert funktioniert offensichtlich nicht für die Übersetzung. Übersetzungsdaten müssen im Gegensatz zu anderen dynamischen Daten auf der Seite natürlich sofort dem Benutzer angezeigt werden. Es kann nicht eingeblendet werden, nachdem die Seite geladen wurde.

Selbst wenn Sie dieses Problem erfolgreich beheben können, besteht das größere Problem darin, dass der Entwicklungsaufwand enorm ist. Ein Entwickler muss jede Zeichenfolge auf der Site manuell extrahieren, in eine JSON-Datei einfügen und manuell anhand des Zeichenfolgencodes (in diesem Fall 'pageTitle') darauf verweisen. Die meisten kommerziellen Websites haben Tausende von Zeichenfolgen, für die dies geschehen muss. Und das ist erst der Anfang. Sie benötigen jetzt ein System, um die Übersetzungen synchron zu halten, wenn sich der zugrunde liegende Text in einigen von ihnen ändert, ein System, um die Übersetzungsdateien an die verschiedenen Übersetzer zu senden, sie wieder in den Build zu integrieren und die Site erneut bereitzustellen, damit die Übersetzer sie sehen können ihre Änderungen im Kontext und so weiter und so fort.

Da es sich um ein "bindendes", ereignisbasiertes System handelt, wird für jede einzelne Zeichenfolge auf der Seite ein Ereignis ausgelöst. Dies ist nicht nur eine langsamere Methode zum Transformieren der Seite, sondern kann auch alle Aktionen auf der Seite verlangsamen. wenn Sie anfangen, eine große Anzahl von Ereignissen hinzuzufügen.

Die Verwendung einer Übersetzungsplattform für die Nachbearbeitung ist für mich jedenfalls sinnvoller. Mit GlobalizeIt kann ein Übersetzer beispielsweise einfach zu einer Seite auf der Website gehen und den Text direkt auf der Seite für seine Sprache bearbeiten. Das war's: https://www.globalizeit.com/HowItWorks . Es ist keine Programmierung erforderlich (obwohl es programmgesteuert erweiterbar sein kann), es lässt sich problemlos in Angular integrieren: https://www.globalizeit.com/Translate/Angular . Die Transformation der Seite erfolgt auf einmal und zeigt immer den übersetzten Text mit an das anfängliche Rendern der Seite.

Vollständige Offenlegung: Ich bin Mitbegründer :)