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

我目前正在本地化我的角度网站，似乎是一个小字符串的好选择。但是，我有一些页面包含很多静态html内容，比如ToS或about页面，我并不想将它们塞进JSON文件（混合了html标记等）

---

那么，有没有一种方法可以使用angular translate（甚至不使用该模块）将内容保存在部分视图（如/partials/tos en.html）中，并根据语言进行交换？

您需要一种方法来获取用户的语言代码。这样，您就可以使用语言代码作为名称的一部分来呈现分部代码

角度平移模块有两种有趣的服务方法：

$translate.use（）

返回用户的活动语言。不幸的是，如果在语言加载到页面之前调用服务方法，则可能会得到null

$translate.proposedLanguage（）

返回“预期语言”——即调用

$translate.use（）

将获得的值，但即使尚未加载语言，此调用也会成功。有了这个列表，您可以使用它们为您想要支持的语言创建分部

差不多

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

---

我建议沿着您突出显示的部分路径走。翻译小块文本对菜单条目有效，但最终对整个文档的阅读却很笨拙。译者需要能够改变句子和段落结构，使其看起来自然

为了实现这一点，我将使用。角度代码仍然很简单，只需参考/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();
    });
}]);

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="translatedPartials.partialOne"></ng-include>
    <ng-include src="translatedPartials.partialTwo"></ng-include>
</div>

<div ng-controller="MyCtrl">
    <ng-include src="partial"></ng-include>
</div>

你的观点

<div ng-controller="MyCtrl">
    <ng-include src="translatedPartials.partialOne"></ng-include>
    <ng-include src="translatedPartials.partialTwo"></ng-include>
</div>

<div ng-controller="MyCtrl">
    <ng-include src="partial"></ng-include>
</div>

我的答案似乎没有答对。关于你在找什么，这个问题有点模糊？确定不同观点的方法？一种保存数据的方法？为什么不使用ng include和范围变量中的html名称呢。根据语言设置变量并完成这似乎是一种非常有前途的方法，我会尽快尝试，谢谢。如何处理不支持的语言/回退到默认语言？@ Thomas Default设置为“EN”，因为英语几乎是通用的。考虑使用数据库来存储您的“页”的语言代码。DB行比Partials文件夹更容易管理。对于这个项目，我没有使用DB，所以我现在不愿意这样做。关于默认语言：如何指定支持的语言？@Thomas，我的第一个想法是在顶级控制器中定义一个包含所有支持语言的数组。然后，您可以简单地检查返回值是否在您的列表中。如果不是，则默认为“en”。