angular i18next::backendConnector 加载正确,但翻译在控制器中不可用

angular i18next::backendConnector loaded correctly, but translations not available in controller

我初始化 i18next:

if (window.i18next) {
window.i18next.use(window.i18nextXHRBackend) ;
window.i18next.use(window.i18nextSprintfPostProcessor);
window.i18next.init({
        debug: true,
        fallbackLng: 'en',
        lng: 'en',
        resGetPath: '/locales/{{lng}}/camps.json',
        backend: {
            loadPath: '/locales/{{lng}}/camps.json'
        },
    }, function (err, t) {
        return i18next ;
        console.log('resources loaded',t);
        var translate = i18next.t("nav");
        console.log("translate variable = " + translate);
    });
};

app = angular.module("ngCamps", ['ngSanitize', 'jm.i18next' , 'ngAnimate', 'ui.select']) ;

然后在我的控制器中:

app.controller("myController", ($scope, $http, $filter, $q, $i18next ) =>     {
    const resources = i18next.getResourceBundle('en','camps') ;
    console.log("resources",resources) ;
    $scope.hello = i18next.t("nav");
    console.log($scope.hello) ;

....... 页面加载时翻译 json 不可用。 但是在页面加载后,我得到一个控制台,告诉我资源已加载

控制台看起来像这样:

i18next::translator: missingKey undefined translation nav nav

...然后 i18next::backendConnector:已加载语言 en

的命名空间翻译

如果我进入控制台 - 我得到正确的翻译:

i18next.t('nav');
"My Camp"

因此,页面似乎在翻译在控制器中可用之前加载。

我该如何改变它? 感谢您的帮助。

您可以在 i18nextLanguageChange 事件触发时使用 $i18next.t,如下所示:

app.controller('myController', ($rootScope, $scope, $http, $filter, $q, $i18next) => {

  $scope.hello = '';

  $rootScope.$on('i18nextLanguageChange', function () {
    $scope.hello = $i18next.t('nav');
    console.log($scope.hello);
  });

示例:https://github.com/i18next/ng-i18next/blob/master/examples/provider/provider1.js