angularjs - 如何使用 AngularJS 在路由中获取本地化模板(templateUrl)

Question

在构建国际 Web 应用程序时，有一个非常流行的用例:

每种文化都有本地化模板，名称约定如“en_US/name.html”、“ru_RU/name.html”等。

只有在用户登录后才能获取用户的区域设置(或者用户可以选择区域设置)。

因此，我发现最好的选择是使用 DI 提供本地化值(这样它就可以在任何地方进行更新 - 或者当我从后端收到用户配置的响应时，或者当用户选择某些内容时)。

但是只能在配置步骤中配置路由，其中​​无法注入(inject)“值”。因此，您无法注入(inject)区域设置配置并根据该值添加 templateUrl。

这是一个Plnkr example请说明我的解决方案。

我看到的唯一其他解决方案是修改私有(private)路由数组(使用 $route.routes[])，但这听起来像是丑陋的黑客。

是否有其他解决方案来实现使用本地化模板的这种常见用例？

Answer 1

可能有多种方法可以按照您的意愿执行此操作，例如覆盖 templateCache 而不是修改路由，但我将以不同的方式处理此问题。

按照您的方法，随着站点的增长，维护(至少)2 个模板副本将非常困难。如果您支持更多语言，那么您遇到的麻烦就会短得多。

我会创建一个服务来保存类似字典的语言对象。

angular.module("myApp", [])
       .factory("Internationalization", function () {
           var dict: {
               en_US: {
                   hello: "Hello,"
               },
               fr_FR: {
                   salut: "Salut,"
               }
           };
           var get = function (locale, key) {
               return formatdict[locale][key];
           }
           return {get: get};
       });

然后您可以将服务注入(inject) Controller 中并将其附加到范围。

这应该可以帮助您入门，您可能需要检查 this如果您需要 string.format 支持，请输出。