如何在使用 ui-router 解析显示任何 UI 之前加载 Angular-translate [英] How to load Angular-translate before any UI is displayed with ui-router resolve
本文介绍了如何在使用 ui-router 解析显示任何 UI 之前加载 Angular-translate的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我为 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'])
}]
}
})
并在 run
中:
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 解析显示任何 UI 之前加载 Angular-translate的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文