Angular JS:翻译带有大量文本的静态html页面

Angular JS: Translating static html pages with a lot of text

本文关键字：文本 静态 html 页面 JS 翻译 Angular      更新时间：2023-09-26

我目前正在本地化我的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>
相关文章：