如何在使用 ui-router resolve 显示任何 UI 之前加载 Angular-translate [英] How to load Angular-translate before any UI is displayed with ui-router resolve

问题描述

我在 i18n 中使用了 angular-translate.我想使用 $translatePartialLoader 服务来模块化语言键作为延迟加载.我也想为此使用 ui-router 解析选项.

I used angular-translate for i18n. I want to use $translatePartialLoader service to modular language key as lazy load. Also I want to use ui-router resolve option for this.

现在该怎么做?可以为我添加代码示例吗?

Now How to do this? Is possible add a code sample for me?

谢谢

推荐答案

我找到解决方案并解决我的问题.

I find solutions and solve my problem.

在配置中:

$translatePartialLoaderProvider.addPart('index');
        $translateProvider
            .useSanitizeValueStrategy(null)
            .fallbackLanguage('en-us')
            .registerAvailableLanguageKeys(['en-us','pt-br'], {
                'en_*': 'en-us',
                'pt_*': 'pt-br'
            })
            .useLoader('$translatePartialLoader', {
                urlTemplate: '{part}/locale_{lang}.json'
            })
            .useLoaderCache(true)
            .useCookieStorage()
            .determinePreferredLanguage();

在 ui-router 中为索引:

.state('index', {
    url: '/index',
    templateUrl: 'index.html',                   
    controller:'IndexCtrl',
    resolve: {
        trans:['RequireTranslations',
            function (RequireTranslations) {
                RequireTranslations('index');
            }],
        dep: ['trans','$ocLazyLoad',
            function(trans,$ocLazyLoad){
                return $ocLazyLoad.load(['plugin']).then(
                    function(){
                        return $ocLazyLoad.load(['IndexCtrl.js']);
                    }
                );
            }]
    }
})
.state('index.users',{
    url: "/users",
    templateUrl: "users.html",
    controller:'UserListCtrl',
    resolve: {
        trans:['RequireTranslations',
            function (RequireTranslations) {
                RequireTranslations('modules/user');
            }],
        dep: ['trans','$ocLazyLoad',
            function(trans,$ocLazyLoad){
                return $ocLazyLoad.load(['UserListCtrl.js'])
            }]

    }
})

并在运行:

app.run(function($rootScope,$translate) {

    // translate refresh is necessary to load translate table
    $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
        $translate.refresh();
    });

    $rootScope.$on('$translateChangeEnd', function() {
        // get current language
        $rootScope.currentLanguage = $translate.use();
    });
})

在 RequireTranslations 工厂中:

app.factory('RequireTranslations', function($translatePartialLoader, $translate,$rootScope) {
    return function() {
        angular.forEach(arguments, function(translationKey) {
            $translatePartialLoader.addPart(translationKey);
        });
        return $translate.refresh().then(
            function(){
                return $translate.use($rootScope.currentLanguage);
            }
        );
    };
});

请注意，您应该在所有 controllers 中添加 $translatePartialLoader 和 trans 作为参数，如下所示:

and please note you should add $translatePartialLoader and trans as parameter in all controllers like this:

app.controller('UserListCtrl',function($scope,...,$translatePartialLoader,trans){

这篇关于如何在使用 ui-router resolve 显示任何 UI 之前加载 Angular-translate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！