我正在将i18next库与我的Angular 1.5.3项目集成。
https://github.com/i18next/ng-i18next
当我使用changeLanguage功能时,我页面上的字符串不会更新为正确的语言。
这是我的HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/8.4.1/i18next.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-i18next/1.0.4/ng-i18next.min.js"></script>
<script src="app.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
Hello, {{name}}!
<div ng-i18next="HELLO"></div>
<button ng-click="change()">change lng</button>
</div>
</body>
</html>
这是我的app.js
if (window.i18next) {
window.i18next.init({
debug: true,
lng: 'en', // If not given, i18n will detect the browser language.
fallbackLng: 'en', // Default is dev
resources: {},
useCookie: false,
useLocalStorage: false,
joinArrays: '<br />'
});
}
var myApp = angular.module('myApp', ['ngSanitize', 'jm.i18next']);
myApp.controller('MyCtrl', MyCtrl);
function MyCtrl($scope, $i18next) {
$scope.name = 'Superhero';
$scope.change = function() {
$i18next.i18n.changeLanguage('fr', function(err, t) {
console.log(t('HELLO')); //prints out bonjour
});
console.log($i18next.t('HELLO')); //prints out hiya
};
$i18next.i18n.addResourceBundle('en', 'translation', {
'HELLO': 'hiya'
});
$i18next.i18n.addResourceBundle('fr', 'translation', {
'HELLO': 'bonjour'
});
console.log($i18next.t('HELLO')); //prints out hiya
}
Plunkr:https://plnkr.co/edit/7oI13bNJVqVgTEFOT6bk
我不知道如何刷新&#39;我的页面以获得正确的翻译。
答案 0 :(得分:2)
<强> Working plunker 强>
使用此选项更改语言$i18next.changeLanguage('fr');
替换:
$i18next.i18n.changeLanguage('fr', function(err, t) {
console.log(t('HELLO')); //prints out bonjour
});
用这个:
$i18next.changeLanguage('fr');
控制器中的翻译
要在语言更改发生后在控制器中执行翻译,请听取i18nextLanguageChange
事件,然后执行如下翻译。
// Listen for the language change event and perform $scope bindings
$scope.$on('i18nextLanguageChange', function () {
// Inside a timeout to allow the language change to complete
$timeout(function () {
console.log($i18next.t('HELLO'));}
);
});