Angular JS：翻译包含大量文本的静态 html 页面

Question

我目前正在本地化我的 Angular 站点，angular-translate 似乎是较小字符串的不错选择。但是我有一些页面包含很多静态 html 内容，例如 ToS 或关于页面，我真的不想塞进 JSON 文件（与 html 标签混合等）。

那么有没有办法使用 angular-translate（甚至没有那个模块）来保存部分视图中的内容（比如 /partials/tos-en.html）并交换它取决于语言？

Answer 1

您想要一种获取用户语言代码的方法。有了这个，您打算使用语言代码作为名称的一部分呈现部分内容。

Angular translate 模块有 2 个感兴趣的服务方法：

$translate.use() returns 用户的活动语言。不幸的是，如果您在语言加载到页面之前调用服务方法，您可能会得到 null。

$translate.proposedLanguage() returns "intended language" -- 表示您将调用 $translate.use() 的值，但即使语言尚未加载，此调用也会成功。有了这个 language codes 列表，您可以使用它们为您打算支持的语言创建部分。

类似

<div ng-include="about-{{ $translate.proposedLanguage() }}.html">
</div>

Answer 2

我建议沿着您突出显示的部分路径前进。翻译小块文本适用于菜单条目，但最终会笨拙地阅读整个文档。译者需要能够改变句子和段落结构等内容，以使其看起来自然。

为了实现这一点，我将使用 Apache's content negotiation (mod_negotiation)。您的 angular 代码仍然很简单，只需参考 /partials/tos.html。 Apache 然后根据需要提供 tos.html.en、tos.html.fr 或 tos.html.de 等。

设置内容协商确实需要使用 Apache 和编辑配置文件的能力，但学习起来并不复杂。我还建议按照说明启用首选语言 cookie，这允许您提供一种覆盖用户浏览器语言设置的语言选择机制。

Answer 3

为每种语言创建一个 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>

Angular JS：翻译包含大量文本的静态 html 页面

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

javascript

localization

angularjs

angular-translate