Я работаю над мобильным приложением с угловыми кордовыми и ионными. Я хочу использовать в своем приложении несколько файлов для передачи. как:Угловой перевод нескольких файлов json
Я использую этот код:
$translateProvider.useStaticFilesLoader({
prefix: 'main/i18n/local-',
suffix: '.json'
});
Мой вопрос в том, как загрузить несколько файлов? Я много искал, но ничего не нашел.
Заранее спасибо
Вы можете использовать частичный погрузчик: https://github.com/angular-translate/bower-angular-translate-loader-partial
см How to best organize translation strings in angular-translate? для образца кода
Вы также можете найти angular-translate-loader-pluggable пакет полезного, частичного загрузчик еще заменяет поставщик погрузчика вместо того, чтобы разрешать несколько загрузчиков для любого данного модуля.
Подключаемый загрузчик затем становится своего рода объединенным поставщиком переводов. Он объединит результаты всех настроенных загрузчиков.
Я использую съемный загрузчик, чтобы разрешить языковые файлы для каждого модуля, а также источник, основанный на базе данных.
Идея состоит в том, что с течением времени большинство статических строковых переводов будут опубликованы в файлы, однако некоторые пользователи могут настраивать непосредственно во время выполнения, а следовательно, и dbStringProvider.В этом примере вы можете увидеть примеры использования на заводе или поставщика метода для определения функции перевода
var module = angular.module('app', [
'pascalprecht.translate',
'LocalStorageModule',
'angular-translate-loader-pluggable'
]);
module.provider('$dbStringProvider', $dbStringProvider);
function $dbStringProvider() {
function isStringValid(str) {
return angular.isString(str) && str !== '';
}
this.$get = ['$rootScope', '$injector', '$q', '$http',
function ($rootScope, $injector, $q, $http) {
var service = function (options) {
// options.key is the requested language identifier
if (!isStringValid(options.key)) {
throw new TypeError('Unable to load data, a key is not a non-empty string.');
}
var errorHandler = options.loadFailureHandler;
if (errorHandler !== undefined) {
if (!angular.isString(errorHandler)) {
throw new Error('Unable to load data, a loadFailureHandler is not a string.');
} else {
errorHandler = $injector.get(errorHandler);
}
}
var deferred = $q.defer(), translations;
translations = {
'TEXT': 'TEST Provider',
'TEXT1': 'This is a test (1: Provider)'
};
deferred.resolve(translations);
return deferred.promise;
};
return service;
}];
}
module.factory('dbStringFactory', ['$q', '$http',
function ($q, $http) {
var loader = function (options) {
var deferred = $q.defer();
var translations = {};
if (options.key == "en") {
// Normally we call the database to get the strings
// The following demonstrates how multiple concurrent providers will provide translations
translations = {
'TEXT': 'TEST Factory',
'TEXT2': 'This is a test (2: factory)'
};
}
deferred.resolve(translations);
return deferred.promise;
};
return loader;
}]);
module.config(translateConfig);
/* @ngInject */
function translateConfig($translateProvider, $translatePartialLoaderProvider, triSettingsProvider, translatePluggableLoaderProvider) {
/**
* $translateProvider only allows a single loader at a time
* Use pluggable loader to add and remove loaders whenever you
* feel the need to, meaning some modules can use entirely different
* translation loaders without having to destroy any previous configuration
*/
$translateProvider.useLoader('translatePluggableLoader');
/**
* each module loads its own translation file - making it easier to create translations
* also translations are not loaded when they aren't needed
* each module will have a i18n folder that will contain its translations
* So still use partial loader as a loader for the pluggable loader.
*/
translatePluggableLoaderProvider.useLoader('$translatePartialLoader', {
urlTemplate: '{part}/i18n/{lang}.json'
});
$translatePartialLoaderProvider.addPart('app');
/**
* Pluggable allows us to register multiple providers
* at the same time!
*/
translatePluggableLoaderProvider.useLoader('dbStringFactory');
translatePluggableLoaderProvider.useLoader('$dbStringProvider');
// make sure all values used in translate are sanitized for security
$translateProvider.useSanitizeValueStrategy('sanitize');
// cache translation files to save load on server
$translateProvider.useLoaderCache(true);
/**
* Map the locale variants of en_US and en_UK to 'en'
* CS: Just an example of how to do it, remove this if you want to use full region codes (locales)
*/
$translateProvider
.registerAvailableLanguageKeys(angularTranslateLanguageKeys, {
'en_US': 'en',
'en_UK': 'en'
})
.use('en');
// store the users language preference in a cookie
$translateProvider.useLocalStorage();
}
Теперь на странице в приложении, используйте следующее, чтобы проверить, что загружены строки
ПРИМЕЧАНИЕ:LAST загрузчик добавлен перезапишет предыдущие записи в переводе, в конфигурации мы загрузили частичный провайдер, затем
dbStringFactory, а затемdbStringProvider. Поэтому провайдер должен перезаписать любой ключи, предоставляемые реализации фабрики:английский является тег частичного файла загружается из
$translatePartialLoaderProvider.addPart('app');
<h3 translate>English</h3>
<h1 translate>TEXT</h1>
<h2 translate>TEXT1</h2>
<h2 translate>TEXT2</h2>
Производит:
Перевод на французский:
Примечание Provider все еще показывает статические результаты строк, потому что если это НЕ изменения результата, основанного на пропущенный на
options.key, где, как реализация фабрики делает фильтр на принятый в языке, но только сконфигурированной чтобы показать английский перевод.
Нормальное поведение углового перевода, чтобы вернуть исходный ключ, если совпадение не найдено, по-прежнему наблюдается.
Я изначально боролся с теми же проблемами, что и ОП, надеюсь, вы найдете это полезным.