angularjs – 使用ui-router和angular-translate本地化URL

发布时间：2020-12-17 08:24:49 所属栏目：安全来源：网络整理

导读：我正在使用ui-router进行路由和角度翻译。我想要实现的是将所选语言绑定到url，如下所示： www.mydomain.com/en/www.mydomain.com/ru/www.mydomain.com/en/aboutwww.mydomain.com/ru/about 并将作出相应的回应。试图寻找例子，但没有找到任何东西。如果有

我正在使用ui-router进行路由和角度翻译。我想要实现的是将所选语言绑定到url，如下所示：

www.mydomain.com/en/
www.mydomain.com/ru/
www.mydomain.com/en/about
www.mydomain.com/ru/about

并将作出相应的回应。

试图寻找例子，但没有找到任何东西。
如果有人实现了类似的解决方案，我很乐意听到你如何做。

谢谢

我使用这些方面的东西：

咖啡脚本

angular.module('app')
.config([
  '$stateProvider'
  ($stateProvider) ->
    $stateProvider.state 'app',abstract: true
      url: '/{locale}'
    $stateProvider.state 'app.root',url: ''
    $stateProvider.state 'app.root.about',url: '/about'
])

JavaScript

angular.module('app').config([
  '$stateProvider',function($stateProvider) {
    $stateProvider.state('app',{
      abstract: true,url: '/{locale}'
    });
    $stateProvider.state('app.root',{
      url: ''
    });
    return $stateProvider.state('app.root.about',{
      url: '/about'
    });
  }
]);

这样，您可以将$ stateParams注入您的控制器，并访问其中的区域设置：

咖啡脚本

angular.module('app')
.controller('appCtrl',[
  '$scope','$stateParams'
  ($scope,$stateParams) ->
    $scope.locale = $stateParams.locale
])

JavaScript

angular.module('app').controller('appCtrl','$stateParams',function($scope,$stateParams) {
    return $scope.locale = $stateParams.locale;
  }
]);

或者，如果要自动影响整个页面，请在应用程序控制器或类似程序中使用$ stateChangeStart事件：

咖啡脚本

$scope.$on '$stateChangeStart',(event,toState,toParams,fromState,fromParams) ->
  $translate.use(toParams.locale)

JavaScript

$scope.$on('$stateChangeStart',function(event,fromParams) {
  $translate.use(toParams.locale);
});

请注意，如果您使用angular-translate v1.x，则应使用$ translate.uses而不是$ translate.use。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!