如何使用 angular-translate 和 angular-ui-router 动态切换语言？答案

【问题标题】：How can I switch languages dynamically with angular-translate and angular-ui-router?如何使用 angular-translate 和 angular-ui-router 动态切换语言？
【发布时间】：2017-12-21 22:59:59
【问题描述】：

我的应用程序正在使用 angular-translate、angular-ui-router 和模板。除 index.html 之外的应用程序 html 页面被打包到模板中，并由 S3 支持的 Amazon CloudFront 提供服务。我想做的是找到一种方法来根据域名后的两个字母代码动态切换语言，如果可能的话，还可以选择用户区域设置并将其用于默认切换。

我想这样做的原因是出于 SEO 的目的，因为我读到 Google 建议在以下地址中输入国家/地区代码。

这是我目前所拥有的：

路由器文件

    var home = {
        name: 'home',
        url: '/home/'
    };

    var homeAccess = {
        name: 'home.access',
        url: 'access',
        views: {
            'home@': {
                templateProvider: ['$templateCache', ($templateCache) => {
                    return $templateCache.get('webapi.html');
                }],
            }
        }
    };

我想以某种方式做到这一点，以便在搜索引擎选择时：

www.example.com/de/home/webapi  or
www.example.com/en/home/webapi  or
www.example.com/fr/home/webapi

在提供 webapi.html 文件之前，该 Angular 路由器会切换到适当的语言文件。

任何关于我如何做到这一点的建议将不胜感激。理想情况下，我希望看到一个带有语言文件切换器的简单示例，它可以帮助我和社区中的其他人完成所需的工作。

请注意还有另一个类似的问题：

Localize URL's with ui-router and angular-translate

那里的答案很好，但我也希望通过打开这个问题，我可以获得更好和更新的答案，也许还有一些国际化 SEO 技巧。我只是认为这是一件非常重要的事情在这个论坛上帮助人们的答案越多越好。

【问题讨论】：

我会说你所引用的问题有一个很好解释的答案 (stackoverflow.com/questions/24281652/…)。您可能会想出更多，但您应该知道，如果没有额外的操作，从 SEO 的角度来看，Angular 1.x 仍然无法提供足够的结果。比如预渲染，如果要达到完整的 SEO 效果。您可能会使用的服务之一：prerender.io
基本标签呢？如果你让它切换到适当的语言，它应该可以工作吗？或者让它指向你的域名的根目录并使用 return $templateCache.get(myLocale+'/home/webapi.html');

标签： angularjs angular-ui-router angular-translate

【解决方案1】：

您需要创建通用的抽象 ui-router 状态并在那里设置您的语言设置：

$stateProvider.state('common', {
  abstract: true,
  url: '/{lang:(?:es|en)}'
});

在你的home 状态将是来自普通的孩子：

$stateProvider.state('common.home', {
  url: '/home',
  templateUrl: 'views/home.html',
});

现在您可以在状态更改事件中设置语言切换：

app.run(($rootScope) => {
  $rootScope.$on('$stateChangeSuccess', (event, toState, toParams) => {
    if(toParams.lang && $translate.use() !== toParams.lang){
      $translate.use(toParams.lang);
    }
  });
});

[19.04.2016] 我声明 Google 仍然无法巧妙地解析您的 Web 应用程序。相关问题-SEO: How does Google index Angular applications 2016

所以我和 @shershen 我建议使用prerender.io 服务以获得更好的 SEO。

【讨论】：