我目前正在本地化我的Angular网站,对于较小的字符串来说,Angular翻译似乎是一个不错的选择。然而,我有一些页面有很多静态的html内容,比如ToS或about页面,我真的不想把它们塞进JSON文件(混合了html标签等)。
那么,有没有一种方法可以使用angular translate(甚至没有该模块)将内容保存在局部视图(如/partils/tos-en.html)中,并根据语言进行交换?
您想要一种获取用户语言代码的方法。既然如此,您就打算用语言代码作为名称的一部分来呈现一个分部。
Angular translate 模块有两种感兴趣的服务方法:
$translate.use()
返回用户的活动语言。不幸的是,如果在语言加载到页面之前调用服务方法,则可能会得到null。
$translate.proposedLanguage()
返回"预期语言",即调用$translate.use()
时得到的值,但即使该语言尚未加载,该调用也会成功。有了这个语言代码列表,您可以使用它们为您想要支持的语言创建部分。
类似的东西
<div ng-include="about-{{ $translate.proposedLanguage() }}.html">
</div>
我建议沿着您突出显示的部分路径。翻译小块文本适用于菜单项,但最终会笨拙地阅读整个文档。译者需要能够改变句子和段落结构,使其看起来自然。
为了实现这一点,我将使用Apache的内容协商(mod_negotification)。您的angular代码仍然很简单,只需参考/partials/tos.html。然后Apache根据需要提供tos.html.en、tos.html.fr或tos.html.de等。
设置内容协商确实需要使用Apache和编辑配置文件的能力,但学习起来并不复杂。我还建议按照说明启用首选语言cookie,这允许您提供一种覆盖用户浏览器语言设置的语言选择机制。
为每种语言创建一个HTML部分。收听控制器中的$translateChangeSuccess事件,并在每次语言更改时创建分部的URL。然后在ngInclude指令中在视图中使用该URL。
V2更好的方法
您的控制器
myApp.controller('MyCtrl', ['$rootScope', '$scope', '$translate', function ($rootScope, $scope, $translate) {
($scope.setTranslatedPartials = function () {
$scope.translatedPartials = {
"partialOne": "/partials/partial_one_" + $translate.use() + ".html",
"partialTwo": "/partials/partial_two_" + $translate.use() + ".html"
//...
};
})();
$rootScope.$on("$translateChangeSuccess", function (event, next, current) {
$scope.setTranslatedPartials();
});
}]);
您的观点
<div ng-controller="MyCtrl">
<ng-include src="translatedPartials.partialOne"></ng-include>
<ng-include src="translatedPartials.partialTwo"></ng-include>
</div>
V1原始方法
您的控制器
myApp.controller('MyCtrl', ['$rootScope', '$scope', '$translate', function ($rootScope, $scope, $translate) {
/*Initialize first so you have it when coming back to the page without the langugage changing*/
$scope.partial = "/partials/" + $translate.use() + ".html"
$rootScope.$on("$translateChangeSuccess", function (event, next, current) {
$scope.partial = "/partials/" + $translate.use() + ".html"
});
}]);
您的观点
<div ng-controller="MyCtrl">
<ng-include src="partial"></ng-include>
</div>